好设计,
从理解你开始。

先问清楚,再做漂亮。

把用户、场景和偏好,变成一套属于你项目的
视觉、交互、动效与图片规范。

先看看它能做什么 ↓
适合个人开发者与小团队 · 可复用的 Markdown
✳
有判断力的设计不必长得和别的项目一样
从背景,到可以执行的规范
视觉系统交互状态动效规则图片方向
一个项目,一套答案 ↗

先把问题问对。
再让设计发生。

不用猜哪种风格“高级”。
从项目本身,找到适合的答案。

01

认识你的项目

读懂技术栈、已有页面和素材,
知道哪些要改变,哪些该保留。

02

问到关键之处

谁在使用?想完成什么?
比“好看一点”更具体地描述设计。

03

留下可用的规范

颜色、排版、交互、动效与配图,
形成下一次开发也能使用的 Skill。

同一个内容,
找到你的表达。

点击切换视觉方向。
让颜色、素材与界面一起回应。

主题示意。实际规范由项目背景决定。

设计方向预览
DESIGN WITH INTENT

让形式,
回应内容。

↗project-design / SKILL.md视觉方向
# 项目设计语言

基调清晰有力

主色#2459E9

排版明确层级,克制装饰

交互与动效

每次变化,都让用户知道发生了什么。

开始之前,
你可能想知道。

它生成的是什么?+

一份项目专属的 SKILL.md 和相关设计规范,记录视觉、交互、动效、图片方向及验证方式,供后续开发复用。

需要先有完整设计稿吗?+

不需要。可以从现有项目、简单想法或喜欢的参考开始。生成器会先澄清影响设计的背景。

这个页面会调用模型吗?+

当前体验使用浏览器本地模板,支持填写背景并下载 Markdown,不会读取仓库或调用模型。页面中的视觉素材已通过生图模型实际生成。

✳

下一次设计,
从你的项目开始。

项目背景 / 01

认识你的项目

先给项目一个名字。

它是什么,准备帮谁解决问题?

本地模板演示 · 不读取仓库,不调用模型

模型生成的设计静物大图