frontend-design SKILL.md skillA
frontend-design from ylxmf2005/longrein is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add ylxmf2005/longrein/frontend-design@git:20261001.490039ePins git:20261001.490039e in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- ylxmf2005/longrein
- Path
skills/frontend-design/SKILL.md- Versions recorded
- 4
- Latest version
- git:20261001.490039e, committed Oct 1, 2026
- First version recorded
- Aug 18, 2026
- Size
- 7,900 bytes
- Repository stars
- 11
- License
- none declared
新建、重设计或明显打磨网站、落地页、Web App、dashboard、编辑器、表单或前端组件时使用，包括"把这个页面做好看点""重做一下这个界面""做个落地页"这类说法。先定一个明确的视觉方向，再实现可运行的界面，并在真实浏览器里检查桌面和移动端。只改和视觉无关的前端逻辑时不用。.
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
# frontend-design 像一家小设计工作室的设计负责人那样工作。界面是产品里真实对象和数据的表达：先弄清有什么、谁在用，再决定怎么组织，然后定视觉，最后在浏览器里用真实数据确认它成立。顺序反过来，先挑好看的布局再往里塞内容，是大多数界面问题的来源。 ## 1. 弄清对象、数据和用户 - **用户**：谁在用，在什么情况下用，进来要完成什么，用什么设备。 - **对象**：产品里有哪些对象，比如项目、实验、运行、配置，每个对象拥有哪些页面和操作。 - **数据**：真实的数据长什么样，会有 0 条、1 条、很多条，很长的名称，缺失的值，失败的记录。每个值从哪里来。 - **现状**：用户给的截图、原型、品牌素材和文案先读；有 `.agents/tasks/<任务>/shape.md` 时先读它。已有仓库里打开实际的 theme、tokens、共享组件和页面，取准确的值。已有的信息架构、交互和视觉语言默认保留，用户同意才改。 能查明的自己查。只有会改变品牌、信息架构、关键流程或范围的问题才问用户，并附上推荐。 ## 2. 用结构表达真实关系 结构从对象和数据里推出来，不从模板里挑。 - **导航跟着对象走**。页面放在它所属的对象下面：只属于某个实验的结果，从这个实验进入，不做成全局入口。功能清单不等于导航。 - **字段要有用处**。每个展示的字段都说得出谁用它做什么决定，说不出就不加。样例数据只能用来测布局，不能决定有哪些字段。来源不同的数值分开展示，缺失的值显示为缺失，不显示成 0。 - **载体按内容的变化来选**。先想数量变多、文字变长、字段增减之后它是否还成立：可比较的记录用表格，元数据用字段列表，连续内容用分区，汇总和明细用展开的层级；卡片只用于彼此独立、结构稳定的单元。不先定网格再补内容去填满。 - **分量按重要程度分配**。重要的给足空间，次要的退后；高度跟着内容走，内容多了在设定的最大高度内滚动；主操作任何时候都够得着，不被滚出视野。 ## 3. 定一个视觉方向 结构定了再定视觉。动手前在工作笔记里写下： - **调色板**：4 到 6 个具名的颜色值； - **字体**：标题和正文，需要时再加说明或数据用字； - **布局**：一句话，需要时画个 ASCII 草图； - **记忆点**：最让人记住的一个元素，取材于产品本身的世界。 写完对照需求检查：哪一部分换成任何类似页面都会得出同样的答案，就改掉它。AI 生成的设计常落在三种样子：米白底配高对比衬线标题和赤陶色点缀；近黑底配一个荧光绿或朱红点缀；报纸式的细线、零圆角和密集分栏。需求指定了就照做，没指定就别把自由度花在这几种上。 …
Read the whole file at its exact version.
How to install
mdr add ylxmf2005/longrein/frontend-design@sha256:3d3c723987bc8e76The line at the top of this page pins the label git:20261001.490039e, 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_hemfnp2aqtt2uovb)
4 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 4 versions of this file, between Aug 18, 2026 and Oct 1, 2026, about one every 15 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20261001.490039e latest | 2026-10-01 | 490039e | 7,900 B | A | view · diff |
| git:20260923.8eb4b09 | 2026-09-23 | 8eb4b09 | 6,818 B | A | view · diff |
| git:20260910.4546a3c | 2026-09-10 | 4546a3c | 8,586 B | A | view · diff |
| git:20260818.1376320 | 2026-08-18 | 1376320 | 8,520 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 (7900 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
ylxmf2005/longrein · 11 stars · license none declared · pushed 2026-10-01 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_hemfnp2aqtt2uovb GET https://markdownregistry.com/api/v1/resolve?ref=ylxmf2005/longrein/frontend-design GET https://markdownregistry.com/api/v1/blob/3d3c723987bc8e76c837161d54646484d223a113a9bdcbf3e734ae0b67284cf6
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.
More from ylxmf2005/longrein
Every file in ylxmf2005/longrein