源自 GitHub去AI味网页设计与重构
专门消除前端代码生成中千篇一律的“AI塑料感”。无论是从零搭建页面、设计单一交互组件，还是对现有代码进行审查重构，它都能先读取已有技术栈与设计规范，严格避免伪造虚假数据和千篇一律的版式节奏。用户还可通过输入参考链接或截图提取视觉基因，获得符合移动端严苛标准、覆盖8种交互状态且结构独具特色的高品质前端页面或组件代码。
常见场景
它能帮你做什么？
01
新建个性化落地页：输入产品目标与受众风格，避开千篇一律的Hero与三列卡片，生成排版差异化且支持四档断点的响应式页面。
02
旧页面反套路重构：针对现有前端代码进行审查或就地重塑，在不破坏已有路由和业务逻辑的前提下升级视觉层与交互节奏。
03
参考网站DNA逆向提取：提供优秀网站URL或截图，提取宏观版式、色彩搭配与排版字体，并输出可复用的design.md规范文件。
04
全状态交互组件开发：针对按钮、弹窗等单一控件，生成严格覆盖默认、悬浮、禁用、加载等8种交互状态的生产级代码及预览。
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“hallmark study https://linear.app 帮我提取它的设计DNA并生成 design.md”
“hallmark audit ./src/pages/Landing.tsx 检查当前页面有哪些典型的AI模板问题”
“hallmark redesign ./components/HeroSection.tsx --mood editorial 保持内容不变，按社论杂志风重构”
“为我的 SaaS 工具设计一个具有8种完整交互状态的次级操作按钮组件”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes Agent可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
