Skills

Design Full

平面设计原子工具, , 建任务工作区与 brief 模板(init)、从内置设计系统库匹配风格(pick)。

Install

npx skills add TeamWiseFlow/xiaobei --skill design-full -g -a claude-code -y
Repository
TeamWiseFlow/xiaobei8.7k
Category
Engineering
Updated
6d ago
License
See repository
Context cost
Lightabout 544 tokens
Runs scripts
Yes, review before use

What it does

平面设计原子工具, , 建任务工作区与 brief 模板(init)、从内置设计系统库匹配风格(pick)。

design-full, 工具说明

本文是 expert-design 专家包内的工具说明书,不独立出现在技能列表中。设计流程(brief 闸门、设计系统确认、素材、编写、视觉 review、交付)由包内 SKILL.md 与 workflows/ 编排。

调用方式:design-full <子命令> [参数...](wrapper 转发到 scripts/,零路径拼接)。design-full help 查用法。

子命令入出退出码
design-full init <任务名>任务名(英文短横线式)design_assets/YYYY-MM-DD-<任务名>/(含 brief.md 模板、source/、output/),并确保 design_assets/references/、design_assets/brand/ 存在0 成功 / 1 参数错
design-full pick "<风格描述>"风格描述(中文关键词即可,如"科技感暗色主题")stdout 列出全部可用设计系统 + 按匹配分排序的 1, 3 套推荐及理由0 成功 / 1 参数错或索引缺失

注意事项:

  • init 按当前工作目录建 design_assets/,调用时 workdir 必须是 Content Producer workspace 根。
  • init 幂等:已存在的 brief.md 不覆盖(保留已填内容)。
  • pick 只做匹配与展示,不写文件;选定结果由 agent 写入任务目录的 DESIGN.md。
  • 匹配是关键词打分(keywords / category / name / description),不是语义检索;描述里多放风格词、行业词、色彩词命中率更高。

内置设计系统库

每套 8 段规范(Visual Theme / Color / Typography / Components / Layout / Depth / Do's & Don'ts / Responsive),文件在工具目录 design-systems/<name>.md,索引 design-systems/index.json。

设计系统风格关键词适用场景
Stripe紫色渐变、优雅、金融科技SaaS 产品页、支付/金融科技落地页
Vercel黑白极简、精密、Geist开发者工具、技术产品官网
Linear超极简、紫色点缀、精确项目管理、效率工具
Notion暖色极简、衬线标题、柔和知识管理、内容平台
Apple极致留白、电影级影像消费电子、高端品牌官网
Supabase暗色翡翠绿、代码优先数据库/后端服务、开源工具
Shopify暗色电影感、霓虹绿电商平台、商业服务
Figma多彩活泼、专业、创意创意工具、设计平台
Spotify鲜明绿、大胆排版媒体/娱乐平台
Tesla极致减法、全屏影像汽车/硬件、极简品牌
Framer黑蓝、动效优先网站构建、交互展示
Airbnb暖色珊瑚、摄影驱动旅游/生活服务、社区平台
BMW巴伐利亚蓝、暗色奢华、金属质感奢侈品牌、高端产品
IBM企业蓝、Carbon 系统、数据密集企业级产品、B2B 服务、数据平台
StarbucksSiren 绿、温暖社区、自然质感生活品牌、餐饮/零售、社区平台

自定义设计系统

内置库覆盖不到时,基于甲方描述自行构建,输出格式参照内置 DESIGN.md 的标准 8 段结构。

也可从上游仓库 VoltAgent/awesome-design-md 导入:

Read the whole SKILL.md on GitHub

More in Engineering