[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-83400":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":17,"compositeScore":18,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":9,"trendingCount":14,"starSnapshotCount":14,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},83400,"ky-design-to-html-skill","KyrieCheungYep\u002Fky-design-to-html-skill","KyrieCheungYep","A Codex \u002F Claude skill for recreating UI screenshots as HTML\u002FCSS.",null,"Python",138,19,1,0,4,33,21,68.7,false,"main",true,[],"2026-06-12 04:01:41","# KY Design to HTML Skill\n\nKY Design to HTML 不是一个 UI 生图 skill。它主要面向已有 UI 截图或设计稿的 HTML\u002FCSS 还原，重点是资产分离、画布适配、截图验证和视觉误差修正。\n适用于 Codex \u002F Claude 的 设计截图 转 HTML\u002FCSS skill。\n\n它适合用在这类场景：\n\n- 给 AI 一张 UI 截图，让它还原成 HTML\u002FCSS\n- 把 landing page 设计稿做成静态网页\n- 把 SaaS 页面、后台页面、空状态页面还原成前端页面\n- 避免 AI 直接照图写 HTML 后，把页面挤变形、资产画糊、比例跑偏\n\n## 这个 skill 解决什么问题？\n\n很多人会直接对 AI 说：\n\n```text\n根据这张图生成 HTML\n```\n\n但这样容易翻车。\n\n因为 AI 被迫同时做三件事：\n\n- 理解页面结构\n- 复刻视觉样式\n- 临时画出复杂视觉资产\n\n这个 skill 会让 AI 先把任务拆开：\n\n- 哪些部分应该用 HTML\u002FCSS 写\n- 哪些部分应该当作图片资产\n- 页面应该按什么画布比例展示\n- 写完后应该截图验证哪里不像\n\n核心流程是：\n\n1. 先拆解页面地图\n2. 分离代码结构和视觉资产\n3. 设置设计稿画布和浏览器展示比例\n4. 写 HTML\u002FCSS\n5. 浏览器截图验证\n6. 对比修正视觉误差\n\n## 安装方法\n\n### Codex\n\n把 `ky-design-to-html` 文件夹复制到：\n\n```bash\n~\u002F.codex\u002Fskills\u002Fky-design-to-html\n```\n\n### Claude\n\n把 `ky-design-to-html` 文件夹复制到：\n\n```bash\n~\u002F.claude\u002Fskills\u002Fky-design-to-html\n```\n\n## 使用方法\n\n在 Codex 或 Claude 里，可以这样说：\n\n```text\nUse $ky-design-to-html to recreate this UI screenshot as a standalone HTML\u002FCSS page.\n```\n\n也可以直接用中文：\n\n```text\n使用 ky-design-to-html，把这张 UI 截图还原成一个 HTML\u002FCSS 页面。\n```\n\n## 文件结构\n\n```text\nky-design-to-html\u002F\n├── SKILL.md\n├── agents\u002F\n│   └── openai.yaml\n├── references\u002F\n│   ├── asset-handling.md\n│   └── visual-error-taxonomy.md\n└── scripts\u002F\n    └── screenshot_page.py\n```\n\n## 备注\n\n这个 skill 的目标不是让 AI 一次生成完美页面。\n\n它的目标是让 AI 按正确流程工作：\n\n```text\n拆解 → 分离资产 → 设置画布 → 写代码 → 截图 → 对比 → 修正\n```\n\n真正的还原质量来自后面的截图校准。\n",2,"2026-06-11 04:11:05","CREATED_QUERY"]