SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场create-design-system

create-design-system

设计与创作

查看项目

更新于 10-24 16:19

技能介绍

用途

create-design-system 用于在构建一致的设计系统、视觉令牌、组件与 CSS 基础时使用。设计系统是文件系统上的文件夹，包含排版指南、颜色、资产、品牌风格与语气指南、CSS 样式，以及 UI 的 React 复刻（界面、幻灯片等）。它们让设计智能体能够依据公司现有产品进行设计，并使用公司品牌创建资产。设计系统应包含真实视觉资产（标志、品牌插画等）、底层视觉基础（如排版细节、颜色系统、阴影、边框、间距系统）、可复用 UI 组件，以及高层 UI 套件（完整屏幕）。

主要能力

  • 组织设计系统结构：默认布局包括 tokens/（CSS 自定义属性，按关注点分文件，如 colors.css、typography.css、spacing.css，每个从 styles.css 导入）、components/<group>/（可复用 React UI 原语）、ui_kits/<product>/（真实产品视图的全屏点击式复刻）、guidelines/（基础样本卡与深入说明）、assets/（标志、图标、插画、图像）、根目录 readme.md（设计指南与清单）。
  • 编译器发现规则：组件是任意 <Name>.jsx / <Name>.tsx（PascalCase 词干）且同目录有同级 <Name>.d.ts；令牌是 :root（或单选择器主题作用域）下声明的任意 --* 自定义属性，且文件可从 styles.css 到达；字体是同一闭包中的任意 @font-face 规则，其 src: url(…) 目标为交付给消费者的二进制文件。
  • 创建流程：探索提供的资产与材料，创建根目录 readme.md，调用 set_project_title，处理幻灯片，编写令牌 CSS 文件与 @font-face 规则，编写根 styles.css（仅 @import 行），更新 readme.md 的 CONTENT FUNDAMENTALS、VISUAL FOUNDATIONS、ICONOGRAPHY 等章节，创建基础样本卡，复制视觉资产，编写可复用组件，为每个产品创建 UI 套件，创建示例幻灯片（如提供了模板），更新 readme.md 索引，创建 SKILL.md。
  • 组件：每个组件是一个文件 <Name>.jsx（或 .tsx），导出 export function <Name>(props) {…}，命名 PascalCase 导出；同目录写 <Name>.d.ts（props 接口）与 <Name>.prompt.md（首行一句话说明，然后 JSX 用法示例，再是变体/属性）。每个目录一个卡片 HTML，首行是 <!-- @dsCard group="Components" viewport="700x<height>" name="<Directory label>" -->，通过相对路径链接 styles.css，通过 <script src="…/_ds_bundle.js"> 加载包，再用 const { <Name> } = window.<Namespace> 挂载。
  • 起始点：通过标签让消费项目在“Starting Points”选择器中播种新设计。组件：在 <Name>.d.ts 的 props 接口 JSDoc 中添加 @startingPoint section="<group>" subtitle="<one line>" viewport="<WxH>"。屏幕：在 HTML 文件首行添加 <!-- @startingPoint section="<group>" subtitle="<one line>" viewport="<WxH>" -->。
  • UI 套件：完整界面的高保真视觉与交互复刻——屏幕而非原语。功能上走捷径（非真实生产代码），但像素级精确，尽可能阅读原始 UI 代码或使用 Figma 的 get-design-context 创建。UI 套件组合上面编写的组件原语，不要在套件内重新实现 Button。index.html 必须看起来像产品的典型视图。

使用方式

开始前创建待办清单，然后按步骤执行：探索资产与材料；创建根目录 readme.md；调用 set_project_title；处理幻灯片；编写令牌 CSS 与 @font-face；更新 readme.md 的 CONTENT FUNDAMENTALS 与 VISUAL FOUNDATIONS；创建基础样本卡（目标约 700×150px，最多 400px，典型 12–20+ 张，按子概念拆分，首行标签 <!-- @dsCard group="<Group>" viewport="700x<height>" subtitle="<one line>" name="<Card name>" -->，建议分组 "Type"、"Colors"、"Spacing"、"Brand"）；复制标志、图标与视觉资产到 assets/；编写可复用组件；为每个产品创建 UI 套件；创建示例幻灯片；更新 readme.md 索引；创建 SKILL.md。

组件编写：每个组件一个文件，保持自包含，仅导入 React，通过 CSS 自定义属性引用样式（不用 CSS-in-JS 库、不用 npm 包）。同级可相对路径互相导入。不要写 _ds_bundle.js、_ds_manifest.json、_adherence.oxlintrc.json 或 barrel index.js——这些自动生成。

UI 套件：为每个产品更新待办清单，包含（1）探索代码库与 Figma 中的组件（设计上下文）和代码，（2）为每个产品创建 3-5 个核心屏幕（如主页或应用），带交互式点击穿透组件，（3）视觉迭代设计 1-2 次，与设计上下文交叉参照。每个 UI 套件包含该产品界面的 JSX（良好分解、小而整洁）——侧边栏、编辑器、文件面板、英雄单元、页眉、页脚、博客文章、视频播放器、设置屏幕、登录等。index.html 应展示 UI 的交互版本。

适用场景

  • 需要为公司/产品建立一致设计系统时。
  • 需要从现有代码库或 Figma 设计上下文提取视觉令牌、组件与 UI 套件时。
  • 需要为设计智能体提供品牌资产与设计基础，使其能依据现有产品进行设计时。
  • 需要创建产品界面的高保真复刻（UI 套件）或幻灯片模板时。

限制

  • 不要从记忆绘制、重建或近似公司的真实标志或品牌标记，即使公司看似可识别；不要用用户未提供的公司身份重新品牌化设计系统。
  • 如果提供的来源中没有标志，不要创建标志：在标志位置用纯文字渲染品牌名，并在 readme.md 中注明缺失。
  • 绝不自己绘制 SVG 或生成图像；尽可能以编程方式复制图标。
  • 如果缺少字体文件，在 Google Fonts 找最接近的匹配，向用户标记此替换并请求更新字体文件。
  • 不要仅从截图重建 UI，除非别无选择；使用代码库或 Figma 的 get-design-context 作为事实来源。
  • 附加套件是事实基准。当其值与相似组件库（shadcn、MUI 等）的公开约定不同时，套件优先。从来源复制精确数值——内边距、圆角、字体大小、行高；绝不四舍五入或对齐到 4/8-px 网格或框架默认值。
  • 组件清单：当具体来源定义了清单（挂载的 .fig 文件、Figma 链接、附加代码库中的组件库），该清单就是组件列表——只构建来源定义的家族，不要添加设计系统“通常”有的原语。仅当没有来源定义组件时，才编写标准集。
  • 不要发明 UI 套件的新设计；UI 套件的职责是复制现有设计，而非创建新设计。
  • 运行独立，除非有关键阻塞（如缺少 Figma 访问权限、缺少代码库访问权限）否则不要停止。
  • 如果无法完成，结束回合时报告哪些家族未构建，并询问用户是否继续——绝不静默地不完整结束。
  • 输出结束时不要总结输出；只提及注意事项，并明确、醒目地请求用户帮助迭代。

暂未提供

资料未提供该技能的具体收费、价格、平台支持范围、效果数据或性能指标。