设计与多媒体

前端设计工具

面向个人开发者的前端界面设计助手，产出有辨识度的高质量页面。Use when 需要设计创作、UI设计、海报制作、品牌视觉时使用。不适用于3D建模和动画制作。适用于独立开发者、企业团队和自动化工作流场景。支持中文交互，无需复杂配置即开即用。输出结果可直接使用，减少二次加工成本。提供结构化输出和错误处理机制。

它能做什么

技能文档

前端设计工具（免费版）

概述

本工具帮助个人开发者摆脱「模板感」，产出有辨识度的高质量前端界面。免费版围绕「色彩 + 字体 + 版式 + 签名元素」四件套设计令牌，配合反模板自检与基础质量底线，适合单页落地页与组件级设计.

核心能力

能力	说明	免费版范围
设计令牌	4-6 个命名色值 + 2 个以上字族 + 版式概念	单页方案
反模板自检	对照三大默认外观做差异化校准	自动提示
质量底线	响应式、键盘焦点、减弱动效	基础三项
输出	HTML/CSS 代码与设计说明	单页/单组件
技术实现要点：核心能力基于`input_params`参数与`output_format`配置实现,支持创建/查询/修改/删除等操作模式,通过`config_options`进行运行时配置.

核心功能执行

用input_params参数进行配置.

处理: 解析核心功能执行的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回核心功能执行的响应数据,包含状态码、结果和日志.

执行此能力时使用input_params参数,支持创建/查询/导出操作

参数配置与调用

用config_options参数进行配置.

处理: 解析参数配置与调用的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回参数配置与调用的响应数据,包含状态码、结果和日志.

执行此能力时使用config_options参数,支持修改/重置/导入操作

结果处理与输出

用output_format参数进行配置.

处理: 解析结果处理与输出的输入参数,完成核心逻辑,返回结构化响应. 输出: 返回结果处理与输出的响应数据,包含状态码、结果和日志.

执行此能力时使用output_format参数,支持导出/保存/转换操作 能力覆盖范围：本skill的核心能力覆盖以下场景关键词：面向个人开发者的、前端界面设计助手、产出有辨识度的高、质量页面、面向个人开发者与、独立设计者的前端、界面设计工具、签名元素四件套设、计令牌生成、反模板化自检与差、可访问性、动效克制的基础质、单页落地页与组件、级设计方案输出等。这些关键词对应description中声明的使用场景,均已在上述能力点中提供对应的操作支持.

使用场景

场景一：为产品落地页生成设计令牌

用户给出一句话定位，工具产出四件套令牌.

输入：面向独立开发者的极简记账工具，希望传递「冷静、可靠、不喧哗」
# ...
输出令牌：
  色彩: ink #1A1D24 / paper #F6F4EF / sage #7C9885 / clay #C77B5A
  字体: 标题 Fraunces（衬线展示）/ 正文 Inter
  版式: 左对齐叙事，hero 用一句主张 + 一个真实数字
  签名: 账目数字以等宽字体呈现，模拟账本刻印感

场景二：反模板自检

自检项：
  [ ] 是否落入「暖米底 + 高对比衬线 + 赤陶强调」默认外观？
  [ ] 是否落入「近黑底 + 酸绿/朱红强调」默认外观？
  [ ] 是否落入「报纸栏 + 零圆角 + 细规线」默认外观？
若任一为是 → 重新选择一个轴做差异化.

场景三：组件级视觉方案

<!-- 签名元素：账本刻印数字 -->

  ¥12,480.00
  本月结余

# ...

不适用场景

以下场景前端设计工具不适合处理：

无明确技术栈的模糊需求
纯架构设计决策
运维部署管理

触发条件

需要代码生成、编程辅助、调试测试、开发部署时使用。不适用于非本工具能力范围的需求.

快速开始

用一句话描述产品定位与希望传递的感受.
工具产出四件套令牌并做反模板自检.
按令牌编写 HTML/CSS，每个颜色与字体决策都来自令牌.
交付前过一遍质量清单.

# 本地预览（任选其一）
python -m http.server 8000
npx serve .

响应解析: 完成完成后,查看输出响应确认任务状态。成功时输出包含解析摘要和响应数据;失败时根据错误信息排查问题,查阅错误解析章节获取恢复步骤.

示例

CSS 变量化令牌，便于全局调整：

:root {
  --color-ink: #1A1D24;
  --color-paper: #F6F4EF;
  --color-sage: #7C9885;
  --color-clay: #C77B5A;
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

最佳实践

hero 是论点：用最具特征的一件事开场，而非「大数字 + 小标签 + 渐变」模板答案.
字体承担性格：展示体与正文刻意搭配，别用 Inter/Roboto 当展示体.
结构即信息：编号、分隔线、标签应编码真实内容，而非装饰.
克制动效：编排一个时刻胜过散落特效；过度动效反而显 AI 味.
先令牌后代码：确认令牌唯一性后再写代码，颜色与字体一律从令牌派生.

常见问题

Q1：设计总像「科技创业」模板怎么办？ A：检查是否用了白底紫蓝渐变、圆角卡片居中 hero。换掉其中一两个轴即可破模板. Q2：免费版能做多页站点吗？ A：免费版聚焦单页与组件。多页站点与设计系统请用专业版. Q3：一定要用展示衬线吗？ A：不一定。展示体可以是任何有性格的字族，关键是与正文区分并服务于主题. Q4：动效越多越好吗？ A：相反。一个编排好的时刻通常比散落特效更有力，过度动效会暴露 AI 生成感. Q5：免费版支持设计系统输出吗？ A：不支持。设计系统、组件库与多主题为专业版能力.

进阶用法

从产品定位推导令牌

把一句话定位拆解为可执行令牌，是免费版的核心工作流：

定位: 面向独立开发者的极简记账工具，传递「冷静、可靠、不喧哗」
# ...
推导链:
  冷静 → 低饱和度 → 主色 sage（莫兰迪绿），避开纯黑
  可靠 → 衬线展示体 → Fraunces 带来「账本」般的稳重
  不喧哗 → 左对齐叙事 → hero 用主张+数字，不用渐变
# ...
最终令牌:
  色彩 ink/paper/sage/clay
  字体 Fraunces + Inter
  版式 左对齐、账本刻印数字

反模板差异化轴

当检测到落入默认外观时，从以下轴选一个做差异化：

差异化轴	操作
字体	换展示体（衬线/手写/等宽）
色温	从暖米切冷灰，或反之
圆角	全局零圆角或大圆角
栅格	非对称分栏代替居中
节奏	短长句交替、留白比例

质量清单

交付前逐项核对：

[ ] 令牌唯一，无硬编码色值
[ ] hero 是论点而非模板答案
[ ] 展示体与正文区分且服务于主题
[ ] 响应式在 375/768/1280 三档正常
[ ] 键盘焦点可见
[ ] 尊重 prefers-reduced-motion
[ ] 图片有 alt 且有尺寸

设计自查表

辨识度：去掉 logo 还能认出是你的产品吗？
克制：动效是否只服务一个关键时刻？
可读：正文字号、行高、对比度是否舒适？
一致：颜色与字体是否都从令牌派生？
真实：结构是否编码了真实内容而非装饰？

依赖说明

运行环境

Agent 平台: 支持SKILL.md的任意AI Agent（Claude Code / Cursor / Codex / Gemini CLI 等）
操作系统: Windows / macOS / Linux
浏览器: 任意现代浏览器用于预览

依赖详情

依赖项	类型	是否必需	获取方式
Google Fonts	字体资源	推荐	fonts.google.com 引入
LLM API	API	必需	由 Agent 内置 LLM 提供

API Key 配置

本工具为纯 Markdown 指令，无需额外 API Key
字体资源通过 CDN 引入，无需鉴权

可用性分类

分类: MD+EXEC（Markdown 指令 + 命令行预览）
说明: 通过自然语言指令驱动 Agent 产出设计令牌与前端代码

错误处理

错误场景	原因	处理方式
配置错误	参数缺失或格式错误	检查依赖说明中的配置要求
运行时错误	运行环境不满足	确认运行环境符合依赖说明
网络错误	连接超时或不可达	执行ping命令测试网络连通性,检查防火墙和代理设置连接后执行ping命令测试网络连通性,检查防火墙和代理设置连接后重新执行命令，参考国内替代方案

已知限制

需LLM支持,无LLM环境不可用
复杂业务场景建议结合人工经验判断
执行效率受模型能力与网络环境影响
当前为免费版本,如需完整功能请升级到付费版获取全部能力