refactoring-ui-principles SKILL.md skillA
refactoring-ui-principles from fission21/miji is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add fission21/miji/refactoring-ui-principles@v1.0.0Pins v1.0.0 in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- fission21/miji
- Path
examples/refactoring-ui-principles/SKILL.md- Versions recorded
- 2
- Latest version
- v1.0.0, committed Aug 27, 2026
- First version recorded
- Aug 27, 2026
- Size
- 7,132 bytes
- Repository stars
- 14
- License
- MIT
设计/美化界面视觉时用：层级、间距、色彩、排版、阴影决策速查（Refactoring UI 方法论）。.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Refactoring UI 视觉设计原则 > 来源：Adam Wathan & Steve Schoger《Refactoring UI》全书解析（252 页 PDF → markdown，见 references/refactoring-ui-full.md 完整版）。 > 用途：做任何界面视觉设计/审查时的**决策速查**。工程实现细节（组件、状态、无障碍）走 frontend-ui-engineering skill。 ## 触发条件 - 设计/美化任何网页、HTML 原型、组件样式 - 挑选颜色、字体、间距、阴影、圆角 - 审查已有 UI 视觉质量（"看起来哪里不对劲"） - 用户要求界面"更精致/更专业/不像 AI 生成" ## 核心心法（先记住这 3 条） 1. **层级即设计**（Hierarchy is Everything）——让重要的东西突出、次要的东西退后，比任何装饰都管用 2. **一切皆系统**——间距/字号/颜色/阴影预定义 8-10 档，禁止随手敲任意值 3. **减少决策疲劳**——在受限集合里用排除法选值，而不是从无限池里挑 ## 设计流程（从零开始） 1. **先做功能，不是布局**——从"搜索航班"这种具体功能画起，不要先画导航栏 2. **细节后置**——先灰度设计（不用颜色），用间距/对比/大小撑起层级 3. **别过度设计**——短周期：设计简单版→实现→迭代→再设计下一个 4. **当悲观主义者**——设计里别暗示你做不出来的功能 5. **定个性**——字体（serif 优雅/圆体活泼/中性 sans 安全）× 颜色 × 圆角 × 文案语气，保持一致 ## 间距与尺寸系统（Layout & Spacing） - **先给太多留白，再删**——而不是从"不丑"的最小值往上加 - **间距尺度**：从 16px 起步，小端密集大端稀疏，**相邻值差距 ≥25%**（线性倍数不行） 实用参考：4/8/12/16/24/32/48/64/96/128 - **不用填满整个屏幕**——600px 就够就别拉宽；窄布局拆列别加宽 - **网格别当宗教**——侧边栏用固定宽度（内容驱动），主区域 flex；组件内部别用百分比 - **相对尺寸不缩放**——大元素在小屏要缩得比小元素快；按钮 padding 不要和 font-size 绑定（em 缩放） - **避免歧义间距**——组外间距 > 组内间距；标题上方间距要大于行高，列表项间距同理 ## 文字系统（Typography） - **字号尺度（手调，勿用数学比例）**：12/14/16/18/20/24/30/36/48 - **用 px 或 rem，禁用 em 做字号尺度**（嵌套会跑出尺度外） …
Read the whole file at its exact version.
How to install
mdr add fission21/miji/refactoring-ui-principles@sha256:404323f85631f5c1The line at the top of this page pins the label v1.0.0, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_ijychw6f347ap2r4)
3 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 2 versions of this file, all committed on Aug 27, 2026.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| v1.0.0 latest | 2026-08-27 | d286bdb | 7,132 B | A | view · diff |
| v1.0.0 | 2026-08-27 | 950f197 | 7,147 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (7132 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
fission21/miji · 14 stars · license MIT · pushed 2026-09-24 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_ijychw6f347ap2r4 GET https://markdownregistry.com/api/v1/resolve?ref=fission21/miji/refactoring-ui-principles GET https://markdownregistry.com/api/v1/blob/404323f85631f5c1a2321429d90433ff200f0d38e887f930851fb7106c08e07c
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.