用途:分析手头的设计,并综合成单个 DESIGN.md 文件,用描述性、面向设计师的语言记录语义化设计系统。它同时服务两类读者:人类可读的视觉语言事实来源,以及 AI 工具生成新界面与组件时的提示基底。核心原则是语义化描述,精确值(十六进制、像素、字重)放在括号中,主语言始终是描述性与功能性的。
输入来源:按保真度大致排序,包括代码库(直接读取样式层,如 tailwind.config.、CSS 自定义属性 / :root、主题文件、.css、UI 基础组件与布局骨架,并引用所依据的路径)、HTML/CSS 原型或组件、实时 URL(用 web_fetch 获取后分析结构与样式)、截图或图片(视觉推断,并明确区分推断与实测)。若用户未说明要捕捉什么,应先询问。优先读取源码而非凭单屏猜测,不得编造输入中无证据的设计系统。
分析与综合:1)氛围,先整体后局部,用贴切形容词描述情绪、明暗立场、密度哲学与空间增长时的行为;2)色板,按角色分组(表面、文字/墨色、强调色、状态色),每个颜色给出描述性名称、括号内精确值及功能角色,文字常用 token→用途表;3)字体排印,说明字体、各角色的字重/字号、字距、大小写惯例;4)几何与形状,把圆角与边框翻译成物理描述,如 pill-shaped、subtly rounded corners、sharp squared-off edges;5)深度与层次,描述分层方式:扁平、柔和扩散阴影、高对比投影、模糊/磨砂、遮罩;6)组件,记录按钮、卡片/容器、输入/表单等的形状、配色、尺寸、悬停/激活、聚焦与错误状态;7)布局原则,留白策略、容器宽度与边距、网格对齐、断点密度变化。
输出格式:以 # Design System: [Name] 开头,含 Source: 行注明分析对象(路径、URL 或截图)以便审计,随后按氛围、色板、字体排印、形状与层次、组件、布局原则分节,可按实际设计增删章节。
最佳实践:描述性命名(如 Ocean-deep Cerulean (#0077B6))、功能性说明用途、全文名称一致、每个描述名附精确值、按用途而非外观命名颜色。常见陷阱:未翻译的技术术语、只有描述名无精确值或只有值无角色、放之四海皆准的模糊氛围、忽略阴影/聚焦环/间距节奏/空状态等细节、记录理想化而非实际存在的系统。
限制:资料未提供具体安装命令、收费、价格、平台或效果信息,暂未提供。