笔记
0工具
0此页用于记录用户反馈问题后的每一次改进
关于
“写笔记”支持四种格式——Word 文档、Excel 表格、Markdown、纯文本，起稿或二次编辑时都能随时切换，同一篇笔记想用哪种形态来记，都由你说了算。
md、txt、csv、json 这类纯文本则原样载入，不做多余加工。拿一张现成的表倒进来、改几笔、再导出去，等于白用一台免费的格式转换器。
要带走就在右上角点“下载”，可导出 PDF、Word、Markdown、Excel、TXT 等格式；列表卡片“⋯”菜单里，也有同样的下载入口。
在“工具”页点“＋ 上传工具”即可发布：填好名称与链接，再用 Markdown 把使用方法写清楚——能解决什么问题、怎么装、怎么用，比堆介绍实在。
要分发安装包就一并上传压缩包（ZIP、RAR、7Z、TAR.GZ，最大 35MB），别人在详情页一键下载；只放链接不带附件也可以。
工具按大家的收藏热度排序，好用的自然会被顶上来。发布后可在详情页或卡片菜单里编辑、下架。
写笔记时勾上“隐藏”，这篇就只存在于你自己的账号里：不进列表、不进搜索、不上首页精选，也不会出现在任何公开的页面，链接发给别人同样打不开。
适合放密码、草稿、日记这类只给自己看的内容；想公开，去“发布”打开它，把“隐藏”的勾去掉再保存，之后编辑会默认保持原状态，不会悄悄变回公开。
不想公开、只想临时给人看：点“分享”生成一条带密码和有效期的链接，到期自动失效，你也能随时撤销。
你的内容会同时保存在多个副本上，系统定期做备份与完整性校验，再配合异地容灾机制：就算某台机器出问题，数据也不会丢，可以长期放心存放；特别重要的资料，仍建议你另外再留一份备份。
全站跑在容器化、模块化的现代架构上，更新、部署、回滚都很快，扩展性和稳定性都按长期运营的标准来设计（Built for reliability, designed to scale）。
这个网站最早只是一个人的笔记仓库，后来慢慢长成现在的知识中枢。设计上很克制——没有广告、没有追踪、没有推荐算法，只是干干净净地存放一些东西；既然做好了，就公开出来，万一有人用得上呢。
不做大而全，不做平台梦，保持简单、保持克制、保持好奇。所有内容都由用户贡献、由用户维护：不会突然冒出付费墙，不会在角落塞广告位，也不会把你的数据卖给第三方。
产品会持续迭代，站内日志页记录着每一次改动，改了什么都有迹可循；想了解这个站是怎么一步步走到今天的，翻翻日志就能看到来龙去脉。
如果在这里看到涉嫌违规的内容，点对应卡片右侧的“举报”按钮就能提交，我们会尽快核实处理；也谢谢你花一点时间，一起把这里维护干净。
趋势
把《Refactoring UI》变成可执行的代码：一个让AI自动遵循设计原则的Claude Skill
一个将《Refactoring UI》设计法则编码化，让Claude Code自动生成符合专业设计规范界面的Skill工具。
痛点：AI生成界面，为什么总差一口气？
如果你用过Claude、ChatGPT等工具生成网页或组件，大概率有过这种体验：结构完整、功能齐全，但视觉上总透着一股“AI味”——间距随意、颜色刺眼、字体大小毫无章法、阴影乱飞。这不是模型能力不足，而是缺少一套可执行的、具体到数值的设计规范。
大多数开发者并非不懂设计，而是缺少系统性的设计决策框架。而《Refactoring UI》这本书恰好提供了这样一套框架，但它是一本300多页的书，AI模型虽然读过，却很难在生成代码时逐条遵守那些抽象原则（比如“不要用纯黑色”“间距要成倍递增”）。
s0xDk/refactoring-ui-skill 正是为了解决这个gap而生：它把书中的设计原则转译成Claude Code可以读取并执行的Skill文件，让AI在生成或修改界面时，能像遵循代码规范一样遵循设计规范。
这个项目做了什么？
简单说，这是一个Claude Code Skill——Claude Code是Anthropic推出的终端编程助手，支持通过“Skills”机制加载特定领域的知识包。这个项目把《Refactoring UI》中的核心设计规则，拆解为：
- 间距系统：使用4px基准的倍增尺度（4、8、12、16、20、24、32、40、48、64、80、96、128、160、192、224、256）
- 颜色系统：定义主色、灰色、强调色的生成策略，包括色相偏移规则（如暖色偏黄、冷色偏蓝）
- 字体系统：字号阶梯（12、14、16、18、20、24、30、36、48、60、72），以及字重对比规则
- 阴影系统：基于光源方向的阴影层次，而非随意模糊
- 层级表达：通过颜色深浅、字重、尺寸而非边框和分隔线来区分层级
- 深度模拟：通过阴影方向和透明度模拟真实光照
这些规则不是写在README里的泛泛而谈，而是结构化、可被程序读取的指令，Claude在生成代码时会主动引用这些规则。
安装与使用：三步上手
前提条件
- 安装Claude Code（需Anthropic账号）
- 一个前端项目（React/Vue/纯HTML均可）
安装步骤
bash
1. 克隆项目到本地
git clone https://github.com/s0xDk/refactoring-ui-skill.git
2. 将skill目录复制到Claude Code的skills目录
在项目根目录下执行：
mkdir -p .claude/skills
cp -r refactoring-ui-skill/skill/* .claude/skills/
3. 在Claude Code中启用（在对话中直接引用）
使用示例
在Claude Code中，你可以这样要求：
使用refactoring-ui-skill来创建一个登录表单组件
请使用refactoring-ui-skill规则，生成一个React登录表单，包含邮箱、密码输入框和登录按钮。
Claude会自动应用以下规则：
- 输入框高度设为40px（间距尺度中的第5档）
- 按钮使用主色，文字用白色，边框圆角用4px
- 表单间距使用24px（尺度第7档）
- 错误提示用红色但明度降低，避免纯红刺眼
- 阴影使用两层：一层是底部环境光，一层是顶部定向光
如果你已有代码，还可以让它“修正”：
请用refactoring-ui-skill规则审查并修复当前页面的间距和颜色层级问题
它会输出具体的修改建议，例如：
diff
- padding: 15px; /* 不在尺度表内，应改为16px */
- color: #000; /* 纯黑应改为#1a202c这类深灰 */
- box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* 阴影太生硬，应分层 */
- padding: 16px;
- color: #2d3748;
- box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.08);
核心亮点：为什么它比“提示词工程”更有效？
1. 规则是结构化的，而非口头描述
很多开发者尝试用提示词让AI遵守设计规范，比如“请使用好的间距”“颜色要和谐”。但模型对“好”的理解是概率性的，每次生成可能不同。而Skill文件提供了具体的数值表和判定标准，模型可以精确匹配，输出稳定。
2. 覆盖了“隐性知识”
《Refactoring UI》中很多规则是反直觉的，比如：
- “不要用纯黑，用深灰”
- “阴影不是越大越好，而是越远越模糊”
- “强调文字用颜色+字重，而不是下划线”
- “按钮的层级通过颜色饱和度区分，而不是边框”
这些知识通过读书可以理解，但写代码时容易忘。Skill让它们成为默认约束。
3. 可组合、可扩展
Skill文件是纯Markdown+YAML格式，你可以：
- 修改间距基数（比如从4px改为8px）
- 添加品牌色板
- 添加组件级规则（如导航栏、卡片）
- 与其他Skill组合使用（如Tailwind规则）
4. 与Claude Code深度集成
不像其他工具需要单独运行，它直接嵌入Claude Code的工作流。你可以在同一个会话中“生成→审查→修复”循环，无需切换工具。
适用场景
- 前端开发者：快速生成设计达标的UI原型，减少反复修改
- 全栈开发者：后端逻辑写完，前端页面不再“惨不忍睹”
- 独立开发者：没有设计师搭档，但想让产品看起来专业
- AI辅助开发团队：统一AI生成界面的设计标准，减少人工审查负担
- 设计系统维护者：将设计规范编码化，让AI自动遵循
同类项目对比
| 项目 | 方式 | 优点 | 缺点 |
|---|---|---|---|
| refactoring-ui-skill | Claude Code Skill | 结构化、可编程、与IDE集成 | 仅限Claude Code |
| 纯提示词模板 | 在Prompt中写设计规则 | 通用 | 不稳定、易遗忘、长Prompt消耗token |
| Tailwind CSS | CSS框架 | 自带设计尺度 | 只解决样式，不解决布局和层级决策 |
| Chakra UI / MUI | 组件库 | 开箱即用 | 定制性受限，不教AI如何思考 |
| Figma插件 | 设计工具 | 可视化 | 不生成代码 |
可以看出，这个项目的独特价值在于：它不是给你一套组件，而是给AI一套“设计大脑”。其他工具解决“写什么样式”，它解决“为什么这样写”。
深入技术细节：Skill文件内部结构
项目主要包含以下文件：
refactoring-ui-skill/
├── SKILL.md # 主入口，定义技能描述和触发条件
├── rules/ # 按主题划分的规则文件
│ ├── spacing.md # 间距尺度表
│ ├── typography.md # 字体层级
│ ├── color.md # 调色板生成策略
│ ├── shadow.md # 阴影与深度
│ └── hierarchy.md # 视觉层级规则
└── examples/ # 示例代码和对比
以 spacing.md 为例，它不只是写“间距要一致”，而是：
markdown
间距尺度表
- 基础单位：4px
- 有效值：4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160, 192, 224, 256
- 规则：
- 元素内部padding：使用8px或16px
- 元素之间margin：使用16px或24px
- 区块间距：使用32px或48px
- 页面级间距：使用64px或80px
- 禁止：使用不在表中的任意值（如13px、17px）
这种精确性让AI在生成时能做出确定性选择，而不是“凭感觉”。
实际效果评测
我实际测试了三个场景：
- 生成一个定价卡片组件：默认Claude生成的卡片间距混乱，按钮颜色刺眼；使用Skill后，间距层次分明，按钮用了主色+暗色hover，阴影自然。
- 修复一个现有页面：原页面用了纯黑文字、红色错误提示、大阴影。Skill修复后，文字变为深灰，错误提示变为暗红，阴影分层。
- 生成一个完整仪表盘：Skill让数字、图表、卡片之间的层级清晰，标题用600字重+大字号，数据用500字重+中等字号，辅助说明用400字重+灰色。
整体效果接近中级设计师水平，远高于默认AI输出。
局限与展望
- 仅限Claude Code：如果你用Cursor或Copilot，暂时无法直接使用（但可以借鉴规则自己实现）
- 规则覆盖有限：目前主要覆盖视觉基础，对于复杂布局（如响应式、栅格）和动效没有涉及
- 需要人工复核：AI仍可能在特殊场景下过度应用规则（如小屏幕上的间距过大）
未来如果作者加入响应式规则、暗色模式规则，以及组件库特定规则，这个项目会成为AI前端开发的标配工具。
总结
s0xDk/refactoring-ui-skill 是一个小而精的项目，它没有发明新设计体系，而是把一本经典设计书变成了AI可以执行的代码。对于被“AI生成界面太丑”困扰的开发者，这是一个立竿见影的解决方案。它证明了：设计规范不是玄学，而是可以编码的工程资产。
如果你在使用Claude Code做前端开发，强烈建议尝试一下。即使不用Claude Code，阅读它的规则文件本身也是一次很好的设计复习。