Sulflower Web Design：一套可复用的网页设计 Skill

它是什么

sulflower-web-design 是我整理的一套 AI 网页设计 Skill。它不是前端框架或组件库，而是一套用于网页设计、实现和验收的工作流。

它适用于 Landing Page、Dashboard、交互原型、截图还原、响应式改版和数据可视化等任务。项目地址：Sulflower314/sulflower-web-design。

打开 GitHub 项目

为什么做它

网页能运行，不代表设计可靠。AI 很容易生成相似的卡片、渐变和布局，也容易忽略已有项目的组件、设计变量和技术约束。

我希望把自己的判断标准固定下来：先理解上下文，再确定设计方向；尊重现有代码库；不虚构数据和素材；最后检查响应式、交互、无障碍和运行时表现。

保留的设计原则

这个版本保留了原有的视觉设计和配色体系：

品牌色优先，使用少量、语义明确的颜色；
必要时用 oklch() 从品牌色推导辅助色；
通过排版、留白、比例和动效建立层级；
默认避免无依据的紫粉蓝渐变、Emoji 图标、虚构数据和粗糙的产品轮廓；
使用真实品牌素材或明确的占位符；
保留 25 套按需加载的风格配方，覆盖编辑极简、信息架构、现代工具、动态实验、粗野主义和温暖人文等方向。

这些不是绝对禁令。如果它们属于品牌或项目方向，就应该被当作设计语言使用。

这次的优化

四种工作模式

Create：从零创建网页、原型或 Dashboard。
Extend：在已有产品中增加页面、组件或流程。
Reconstruct：根据截图、Figma 或参考稿还原界面。
Improve：诊断并优化已有页面。

不同模式使用不同策略：新建关注方向，扩展关注一致性，还原关注比例，改进关注保留与取舍。

更适合真实项目

Skill 会优先使用项目已有的框架、组件、路由、设计变量和依赖，不会为了方便自己而重写技术栈。v0、变体和 Tweaks 面板也改为按需使用，避免小任务被过重的流程打断。

同时加入了语义化 HTML、键盘操作、可见焦点、减少动效、图片和字体性能、素材授权、链接和运行时错误等检查。

开源结构

sulflower-web-design/
├── README.md
├── README.en.md
├── LICENSE
├── CONTRIBUTING.md
├── SECURITY.md
├── install.ps1
├── .github/workflows/validate.yml
└── skill/sulflower-web-design/
    ├── SKILL.md
    ├── manifest.json
    └── references/

真正供 AI 代理读取的是 skill/sulflower-web-design/。详细规范按任务拆分到 references 中，包含设计基础、工作模式、品牌素材、输出类型、质量验收、设计方向和风格配方。

项目使用 MIT License，并提供中英文 README、贡献指南、安全政策、Issue 模板和 GitHub Actions 校验。

安装与使用

一键安装（Windows PowerShell）

确认信任这个公开仓库后，可以直接执行下面这一行：

1	irm https://raw.githubusercontent.com/Sulflower314/sulflower-web-design/main/install.ps1 \| iex

它会从 GitHub 下载最新版本，并安装到当前用户的：

1	$env:USERPROFILE\.codex\skills\sulflower-web-design

安装完成后，重启 Codex 或重新加载 Skills，再调用 $sulflower-web-design。如果希望先检查脚本，可以在 GitHub 下载 install.ps1 后再运行。

如果目标目录已经存在，安装会覆盖同名文件；有本地修改时，请先备份。

手动安装

如果已经下载或克隆了仓库，在项目根目录执行。这个命令只负责复制本地文件，不会自动从 GitHub 下载：

1	Copy-Item -Recurse -Force .\skill\sulflower-web-design "$env:USERPROFILE\.codex\skills\sulflower-web-design"

然后显式调用：

1	使用 $sulflower-web-design 在现有 React 项目中新增一个与当前设计系统一致的数据分析页面。

小结

我把这套 Skill 开源，是因为它已经从一份个人提示词，变成了一套可以安装、修改和反馈的项目。

它记录的核心很简单：先理解，再设计；尊重已有系统；不编造内容；用视觉质量和工程检查共同完成一个网页。

Welcome to FFFCX's Blog