用途:从任意网站URL、参考图片或文字需求,生成面向AI编码代理(如Claude Code、Cursor、v0等)的DESIGN.md设计规范书。DESIGN.md是以Markdown描述的配色、排版、组件、间距与调性规范,置于项目根目录并以@DESIGN.md引用,帮助AI生成风格一致的UI。输出遵循getdesign.md/awesome-design-md的9章节结构。
三种输入方式:
- URL模式:执行 python {SKILL_DIR}/scripts/extract_css.py <URL>,从返回的JSON(颜色频率、字体、圆角、阴影、断点)套用references/template.md生成。
- 图片模式:用Read工具读取图片,由模型目视提取,无法取得CSS的元素(如HEX值)以近似值标注“要確認”。
- 文字需求模式:将需求拆解为氛围、行业、目标、调性、必需元素后填充模板。混合输入时先用URL生成再按文字调整。
输出章节:1.Visual Theme & Atmosphere;2.Color Palette & Roles;3.Typography Rules;4.Component Stylings;5.Layout Principles;6.Do's and Don'ts;7.Depth & Elevation;8.Responsive Behavior;9.Agent Prompt Guide。章号1~9顺序固定,信息不足的章节不省略,留空并标(要確認)。推测值末尾加“(推定値・要確認)”,末尾注明Source行。
依赖:Python 3.9+、requests(pip install requests)。
限制:图片与需求模式的部分数值为推测需人工确认;URL模式依赖CSS可解析性,动态或受限站点可能提取不全。其他环境、平台、价格与效果信息暂未提供。