源自 GitHub高美感前端网页设计与重构
该技能针对传统AI生成网页风格千篇一律（如滥用紫色渐变、通用Inter字体、假数据等）的痛点，将顶尖前端设计工程师的设计直觉与系统化流程固化下来。它包含从事实校验、设计定位校准（五维旋钮）、25种行业名家风格配方库（如Linear极简暗色、Aesop留白排版、Bloomberg数据终端等）、轻量v0草图验证到最终完整代码实现的全流程。支持落地营销落地页、交互原型、在线演示文稿、数据大屏及微交互动效，并提供可执行的设计评分与浏览器验收方案。
常见场景
它能帮你做什么？
01
产品营销落地页定制：依据品牌调性选用名家设计配方，生成排版精致、色彩考究且拒绝俗套审美的落地页代码。
02
交互原型与动态大屏开发：输入业务线框图或功能诉求，快速构建包含微交互、数据图表与动效的高保真前端页面。
03
老旧Web界面视觉重构：提供现有代码或产品截图，在保留原有业务逻辑的前提下，全面升级设计系统与视觉质感。
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“为我的AI代码搜索工具设计一个暗色系落地页，风格参照Linear，使用Space Grotesk字体并加入细线卡片质感，输出单文件可运行的React代码。”
“将这段杂乱的销售数据重构成一个Bloomberg Terminal风格的金融监控看板原型，包含高信息密度表格和状态指示灯。”
“重构现有的产品注册页HTML代码，剔除俗套的紫粉渐变和emoji图标，建立一套基于oklch调色板和8pt网格的严谨设计规范并输出v0结构草图。”
适用人群
适合谁？
上手门槛
使用难度
专业
适合熟悉相关工具和专业流程的用户。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
