Skills · Claude Code · Agent Skills

有方法的设计:先有获批线框,再写代码。

Name: schematize-design
Author: schematize

从视觉参考到 wireframe.json、wireframe.svg、批准、代码和审计的固定流程。外观与审美归本技能,前端工程归 schematize-web。

v0.2.0Disciplina · Design de UIgithub.com/schematizeme/skill-design

维护者 Lucas Andrade

schematize-design · v0.2.0bash

$ schematize install design

GitHub →下载技能 (.zip)/design-help · github.com/schematizeme/schematize-cli

不可协商的底线

绝不为了“更快”而关闭。完整清单见技能本体。

先批准线框再写代码

JSON 是事实来源,SVG 只是图示;整页设计会在构建前暂停并询问技术栈,构建器读取 JSON,绝不读取 SVG。

生成媒体绝不由 Claude 完成

检测 Codex 和 Gemini,询问使用哪一个并交给 schematize-models;若都没有,会直说并建议使用图库或客户素材。

图标使用 SVG,绝不使用表情符号

使用内联 SVG(附带 22 个符号的精灵图);图表这类结构性 SVG 属于代码,而具象插画算作生成视觉内容。

对比度与 DOM 靠测量而非猜测

对比度、比例尺度和时长来自参考文件和 scripts/ 中的审计器(带故意失败的测试),不凭记忆工作。

拒绝 AI 套路化设计

统一的拒绝清单附带反证,并已解决来源之间的冲突,避免千篇一律的生成器风格。

只询问会改变工作的事项

先判断模式(说服、操作、阅读、体验)和可发挥的程度,其余自行决定并记录在 meta.suposicoes。无参数时命令只提问,绝不自行运行。

命令

安装在 .claude/commands/。随时可运行 /design-help。

/design-animate有意图的动效:一个标志性时刻,仅在值得时使用 GSAP。参数:momento、delight、overdrive、revisar。

/design-audit第 5 步:审计成品页面的对比度、渲染后的 DOM、临时图片和反模式,以 Before / After / Why 表格呈现。

/design-build第 4 步:基于已获批的 wireframe.json 构建页面,输出为单文件 HTML、Next.js 或 Shopify Liquid 区块。

/design-cc上下文压缩:将交接写入 archive 并运行 /compact。

/design-claude在仓库根目录创建或合并常驻的设计 CLAUDE.md(底线、媒体规则、与 schematize-web 的边界)。

/design-critique按启发式评审 UX 与 UI(层级、清晰度、认知负荷、一致性、可访问性),按优先级以 Before / After / Why 表格列出发现。

/design-handoff在 archive 中生成交接文件(context.md + checklist.md),不压缩。

/design-harden让界面达到可上线水准:状态、i18n、新手引导、屏幕适配和界面性能。参数:estados、i18n、onboard、adapt、optimize。

/design-help显示设计技能的命令菜单;仅列出,不执行任何操作。

/design-load强制加载全部规范内容,并在本次会话中执行。

/design-polish发布前的最终质量检查:质量底线、动效、拒绝项和检查清单一轮完成。

/design-shape构建前规划 UX 与 UI(目标、受众、内容、流程、状态);init、document、extract 会记录 PRODUCT.md、DESIGN.md 和设计令牌。

/design-tune在保留品牌识别的前提下针对单一维度调整。参数:bolder、quieter、distill、colorize、typeset、layout、clarify。

/design-variants并排生成某个元素的多个变体供选择:generate(独立文件)或 live(127.0.0.1 本地服务器)。

/design-visual对成品页面做视觉复查:在 5 种宽度下测量 DOM,截图并指出仍可改进之处。

/design-wire第 0 至 3 步:读取视觉参考(图片、URL 或简报),在当前目录生成 ./wireframe.json 和 ./wireframe.svg,并暂停询问技术栈。

面向 AI 代理

无需人工干预即可安装。元数据见 llms.txt。

运行:git clone https://github.com/schematizeme/skill-design.git && ./skill-design/install.sh
或下载 https://github.com/schematizeme/skill-design/releases/latest/download/skill-design.zip 并解压到 .claude/skills/
将 assets/CLAUDE.md 复制到仓库根目录(常驻规则)。
用 /design-help 确认。

不想安装？

阅读完整规范并直接复制到你的项目——或安装该技能，让智能体自动执行。

GitHub →技能包