做产品界面时，最烦的不是「能不能画出来」，而是画完之后到处走样：Web 一套蓝、小程序另一套圆角，App 再找原生同学重做一遍。AI 写页面变快了之后，这个问题更刺眼——生成得越勤，分叉越快。

 

技趣星球开源了 [Planet Components](https://github.com/techskillplanet/planet-components)：一套 Sky Planet 视觉语言，八个技术栈同步发版，约 57 个契约组件，并带上给 Cursor / Claude / Codex 用的 Agent Skills。人和模型共用同一张组件菜单，而不是各写各的按钮。

 

技趣星球 · 用技术创造乐趣。

 

日期：2026-09-10

 

 

文末再聊一句最近很吵的「前端已死」——和这个库为什么会出现，其实是同一件事。

 

它是什么

 

[Planet Components](https://github.com/techskillplanet/planet-components) 是技趣星球的跨端基础组件库，品牌口号「用技术创造乐趣」，视觉方向叫 Sky Planet：蓝天主色、云感表面、岛屿式控件、柔和描边、克制动效。

当前公开版本 0.2.1（2026-09-10 全栈同步发版），MIT 协议，已经上架所有常见渠道：

技术栈 — 包 / 坐标 — 渠道
React Web — @techskillplanet/planet-components-react — npm
Vue Web — @techskillplanet/planet-components-vue — npm
React Native — @techskillplanet/planet-components-react-native — npm
微信小程序 — @techskillplanet/planet-components-miniprogram（bc-*） — npm
Flutter — tech_skill_planet_components — pub.dev
Android View — io.github.techskillplanet:planet-components-android — Maven Central
iOS SwiftUI — PlanetComponents — SPM / CocoaPods
Kuikly — io.github.techskillplanet:planet-components-kuikly — Maven Central

它和「随便找个 Ant Design / Material，再让 AI 抄样式」不一样：Token、组件 API、Agent Skills、样品工程、结构校验是绑在一起的。AI 被约束去调用已发布的 Tsp / Basic / bc-*，而不是自由发挥再造一套 div 按钮。

完整安装命令和平台说明见 [README.zh-CN](https://github.com/techskillplanet/planet-components/blob/main/README.zh-CN.md)。

 

57 个组件，六个分类

 

在 GitHub 仓库配套的 studyplan.top/planet 可以看到所有组件的实时 React 示例。当前约 57 个契约组件，按功能分成六大类：

基础控件（Basic Controls）
TspButton、TspChip、TspIconButton、TspTextLink、TspTag、TspFab

容器（Surfaces）
TspCard、TspListItem、TspEmpty、TspRefreshLayout、TspCollapse、TspDivider、TspPrintSheet、TspCheckInStreakCard、TspAvatar、TspDrawer

反馈（Feedback）
TspAlert、TspBadge、TspProgress、TspNotification、TspToast、TspModal、TspLoadingDialog、TspSkeleton、TspTooltip

输入（Inputs）
TspInput、TspSelect、TspOptionSheet、TspSwitch、TspCheckbox、TspRadio、TspSearchBar、TspStarRating、TspPinInput、TspDatePicker、TspSlider、TspTextArea、TspInputNumber、TspTimePicker、TspUpload

导航（Navigation）
TspSegmentedControl、TspTopBar、TspBottomTab、TspTabs、TspStickyFooter、TspChildSwitcher、TspSwiper

数据展示（Data）
TspAmount、TspKeyValueLabel、TspStepper、TspScoreRuleGrid、TspRedeemCardGrid、TspCalendarHeatmap、TspBalanceHero、TspTable、TspTree、TspCascader

公共 API 收得很小、跨栈对齐：variant、disabled、selected / checked、text / title / message，以及运行时换肤。

 

三层底座：Token、契约、Skills

 

 

Token：颜色和圆角有名字

 

共享源在 design/tokens/color_token.json 与 style_token.json。语义键类似 semantic.control.button.primaryBackground，而不是 blue.500。

品牌方向叫 Sky Planet：主色 #31A8FF、云感表面、岛屿抬升控件。支持四套主题：Sky / Night / Mint / Sunrise；风格如 island_raised。

平台运行时吃 typed theme，例如 React 的 starPlanetThemes.sky、Flutter 的 StarPlanetTheme.sky。改主题改的是「主按钮背景」这层意思，不用满仓库搜十六进制。

 

契约：组件长什么样先写死

 

component_contract.json 钉死组件名、variants、props。Button 就是 primary / default / danger / text / link。人和 AI 共用同一张菜单：让 Agent「加一个主按钮」，它该用 TspButton 的 variant="primary"，而不是发明 SuperBlueBtn。

发版前还有结构门禁：check-structure、check-token-drift、check-contract-inventory、check-icon-catalog，以及 ./tools/headless-check.sh。模型可以写代码，但不能静默破坏契约。

仓库结构的设计考虑了人和 Agent 都好读：每栈 library + samples，一样品一页，路由集中，barrel 只导出公开 API。

 

Skills：把「怎么用库」装进 Agent

 

公开安装：

 

npx skills add techskillplanet/planet-components

 

装上后，Cursor / Claude / Codex 可自动选用以下技能：

消费类

 

  • ai-build-with-planet：非工程同学用中文搭页面
  • use-planet-components：检测宿主栈，安装匹配包，只用契约 API
  • integrate-react-components、integrate-vue-components 等：按栈接入已发布包

 

扩展类

 

  • build-planet-components：在库内扩组件、发版
  • publish-planet-components：发版到 npm / Maven / pub.dev
  • build-android-view-ui、integrate-android-view：Android View 专属
  • integrate-ios-swiftui、integrate-react-native-components、integrate-flutter-components、integrate-miniprogram、integrate-kuikly：各栈接入

 

非技术同学可以先看 [docs/AI_FOR_EVERYONE.md](https://github.com/techskillplanet/planet-components/blob/main/docs/AI_FOR_EVERYONE.md)，复制「万能开场」提示词即可。

 

怎么上手

 

 

工程师：装包就用

 

各栈安装命令统一 0.2.1：

React Web

npm install @techskillplanet/planet-components-react

 

import { TspButton, starPlanetTheme } from '@techskillplanet/planet-components-react';
import '@techskillplanet/planet-components-react/styles.css';

 

 

{}} />

 

Vue Web

npm install @techskillplanet/planet-components-vue

 

React Native

npm install @techskillplanet/planet-components-react-native

 

import { TspButton, resolveTheme } from '@techskillplanet/planet-components-react-native';

 

 

const theme = resolveTheme('sky', 'island_raised');
{}} />

 

Flutter

flutter pub add tech_skill_planet_components

 

import 'package:tech_skill_planet_components/tech_skill_planet_components.dart';

 

 

TspButton(
text: '开始',
variant: TspButtonVariant.primary,
theme: StarPlanetTheme.sky,
onTap: () {},
);

 

Android View

implementation "io.github.techskillplanet:planet-components-android:0.2.1"

 

BasicThemeManager.init(context, "sky_planet_day", "island_raised");

 

 

iOS SwiftUI

.package(url: "https://github.com/techskillplanet/planet-components", from: "0.2.1")

 

import PlanetComponents

 

 

TspButton("开始", variant: .primary) { }

 

微信小程序

npm install @techskillplanet/planet-components-miniprogram


小程序侧使用 bc- 组件（语义对齐契约 Tsp）。

 

Kuikly

repositories {
    mavenCentral()
    maven { url = uri("https://mirrors.tencent.com/repository/maven-tencent/") }
}
dependencies {
    implementation("io.github.techskillplanet:planet-components-kuikly:0.2.1")
}

 

其他栈的完整说明见仓库 [README.zh-CN](https://github.com/techskillplanet/planet-components/blob/main/README.zh-CN.md)。

 

非工程 / 产品：装 Skills，用中文描述页面

 

 

  • 安装 Skills：npx skills add techskillplanet/planet-components
  • 新开一个 AI 对话（旧对话可能读不到新技能）
  • 先发「万能开场」：

 

 

请使用技趣星球 Planet Components（npm：@techskillplanet/planet-components-react@0.2.1）帮我做网页界面。
必须遵守：

 

 

  • 使用 Tsp* 组件，不要自己用 div 重造按钮/顶栏/卡片；
  • 入口引入 styles.css；
  • 使用 starPlanetThemes.sky 作为 theme 传给每个组件；
  • 用通俗中文解释你做了什么、我怎么打开预览；
  • 先完成一个能跑的单页，再问我要不要加功能。

 

请加载并遵循 skill：ai-build-with-planet。

 

 

  • 再丢一句需求，例如：

 

 

做一个家长端首页：顶栏标题「本周任务」，下面三张卡片（打卡、积分、兑换），底部一个蓝色主按钮「去完成」。

 

更多模板在 docs/prompts/zh-quickstart.md。

 

Agent 生态：13 个 Skills 覆盖全链路

 

Planet Components 带的不是一两个 demo，而是一套完整的 Agent 工作流：

页面搭建

 

  • ai-build-with-planet：非工程同学用中文出可预览页面
  • use-planet-components：检测栈、装包、调用契约 API

 

按栈接入

 

  • integrate-react-components、integrate-vue-components、integrate-react-native-components
  • integrate-flutter-components、integrate-ios-swiftui、integrate-android-view
  • integrate-miniprogram、integrate-kuikly

 

库的扩展与发版

 

  • build-planet-components：在库内扩组件、维护 samples
  • publish-planet-components：发版到各平台仓库

 

这些 Skills 的公共安装命令是 npx skills add techskillplanet/planet-components，也可以把仓库根目录直接加到 Cursor 插件目录。

 

谁适合现在用

 

角色 — 建议动作
产品 / 运营 / 老师 — 装 Skills，用中文出可预览的 React 单页
前端 / 全栈 — 业务仓接入对应栈 0.2.1，基础控件只许来自 Planet
多端团队 — 先对齐 Token 与契约清单，再让 AI 按栈生成页面壳
设计 — 从「每端出一套标注」转到「语义 Token 与变体是否够用」

仓库入口：

 

  • GitHub：[https://github.com/techskillplanet/planet-components](https://github.com/techskillplanet/planet-components)
  • 中文 README：[README.zh-CN](https://github.com/techskillplanet/planet-components/blob/main/README.zh-CN.md)
  • 组件在线预览：studyplan.top/planet（GitHub 仓库配套，可能需要科学上网）
  • 非技术指南：docs/AI_FOR_EVERYONE.md
  • Agent 插件：docs/AI_PLUGIN.md
  • 组件契约：docs/COMPONENT_CONTRACT.md

 

 

顺带一提：有人说「前端已死」

 

最近常听到一种说法：Cursor、Claude 已经能写登录页和列表页，「前端要失业了」，甚至「前端已死」。

半对半错。

半对：大量中后台、运营页、教育小工具里，「从零手搓第一版界面」的溢价确实在塌。模型会布局、会堆组件、会出可运行页面。

半错：AI 最擅长「看起来像那么回事」，不擅长全产品同一套视觉语义、多端同名同义、换肤不拆代码。缺了设计系统和组件契约，生成得越勤，技术债堆得越快。

Planet Components 要解决的，正是这后半句——不是取代界面工作，而是把可复用的控件、Token、Skills 先钉住，再让 AI 在护栏里填业务页。

更准确的说法是：手搓像素这条路在缩；契约 + Agent 这条路在涨。 「前端已死」适合当醒目标签；醒来之后，活要重新分工——定边界、做验收、做产品判断，仍然是人的事。

 

今天的小结

 

 

  • 想快速看效果：打开 studyplan.top/planet 看 57 个组件的实时示例（可能需要科学上网），或克隆 [planet-components](https://github.com/techskillplanet/planet-components)，按你的栈装 0.2.1，先跑 samples
  • 想让 AI 按设计系统出页：npx skills add techskillplanet/planet-components，新开对话，粘贴万能开场，让它做一页家长首页
  • 已经在做多端产品：先读 component_contract.json 和 Token，再谈生成；否则 AI 只会帮你加速分叉

 

技趣星球 · 用技术创造乐趣。

参考来源：

 

  • Planet Components 开源仓库 — GitHub: techskillplanet/planet-components
  • 中文 README — [README.zh-CN.md](https://github.com/techskillplanet/planet-components/blob/main/README.zh-CN.md)（2026-09-10，v0.2.1 全栈发版说明）
  • 组件在线预览 — studyplan.top/planet（57 个契约组件实时 React 示例，GitHub 仓库配套）
  • docs/AI_FOR_EVERYONE.md、docs/AI_PLUGIN.md、docs/prompts/zh-quickstart.md
  • component_contract.json（约 57 个跨栈契约组件）
  • .agents/plugin-manifest.json（Agent Skills 0.2.1）

 

 

# 前端
Logo
EazyDevelop社区

一站式 AI 云服务平台

更多推荐

cover

长录音反复拖拽进度条，IOS这款APP支持章节速览

avatar EazyDevelop社区
cover

ES599-74D243 DFN超薄长按开关机芯片 低功耗FPC软板方案详解

avatar EazyDevelop社区
cover

银行与证券的智能财务Agent：对账、审单与风险预警场景盘点

avatar EazyDevelop社区