[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-93050":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":10,"languages":10,"totalLinesOfCode":10,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":15,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":14,"starSnapshotCount":14,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},93050,"identity-skill","Sac-Y\u002Fidentity-skill","Sac-Y","数字名片.skill：一键打造专属个人网站","",null,115,11,101,0,14,44.64,"MIT License",false,"main",true,[],"2026-07-22 04:02:08","\u003Csub>🌐 \u003Cb>中文\u003C\u002Fb> · \u003Ca href=\"README.en.md\">English\u003C\u002Fa>\u003C\u002Fsub>\n\n\u003Cdiv align=\"center\">\n\n# Identity Skill\n\n> *「给它参考图，拿回一个 1:1 还原的个人网站。」*\n> *\"Hand it the reference images. Get back a personal site that actually matches them.\"*\n\n[![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-green.svg)](LICENSE)\n[![Codex](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCodex-Ready-black)](https:\u002F\u002Fopenai.com\u002Fcodex)\n[![Skills](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fskills.sh-Compatible-blueviolet)](https:\u002F\u002Fskills.sh)\n\n\u003Cbr>\n\n**先出参考图，再写代码。设计你先过目，实现照图还原。**\n\n用 Image 2 把每个分区的设计出成参考图，你确认后再做 1:1 还原。设计这一步交给最强的图片模型，补上 Codex 的短板；写第一行代码前，你已经看过并锁定了设计。\n\n```\nnpx skills add Sac-Y\u002Fidentity-skill\n```\n\n主要面向 **Codex**，装好后直接说话即可触发。\n\n[案例演示](#案例演示) · [为什么需要它](#为什么需要它) · [怎么工作](#五步工作流) · [安装与使用](#安装与使用)\n\n\u003C\u002Fdiv>\n\n---\n\n## 案例演示\n\n以下网站都是用该 skill 生成：\n\n**1 · 马斯克**\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F8396b561-5f30-40a8-92d0-e8655337193c\n\n**2 · links（国内知名旅游摄影博主）**\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F54c89d13-f7a7-4e0c-ba77-5f9b236b2cda\n\n**3 · Sac（仓库作者）**\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F31ccce26-ace5-41e4-909d-12603cce96b6\n\n---\n\n## 为什么需要它\n\n让 agent 做网站，通常是它直接开始写代码——你看不到设计长什么样，只能等它做完，而它的审美又不稳定。\n\n这个 skill 反过来：先用 Image 2 把每个分区的设计出成参考图给你确认，再照图高保真还原。你在写代码前就锁定了设计，实现只负责还原。\n\n---\n\n## 五步工作流\n\n每一步都有明确产物，前四步之间有**阻塞式确认关卡**——你在关键决策点拍板，而不是等它做完一整个错的网站。\n\n| 步骤 | 做什么 | 产物 | 确认关卡 |\n|------|--------|------|----------|\n| **1 · 内容与风格锁定** | 读你的简历\u002FLinkedIn\u002F项目链接，定站点形态和分区，推荐最多 3 个**可视觉想象**的风格方向 | 内容与站点形态文档 + 风格选项 | ✅ 确认内容和风格 |\n| **2 · 参考图锁定** | 每个分区出一张横向参考图，做一致性 + 单调性双向审查（含「灰块测试」） | 分区参考图集合 | ✅ 接受参考图 |\n| **3 · 素材拆分清单** | 逐张拆解参考图：哪些留代码、哪些出背景图、哪些出前景素材，并**测量每个素材的几何**（包围盒、长宽比、占宽 %） | 参考图→构建映射 + 素材清单 | ✅ 确认拆分方案 |\n| **4 · 素材生成评审** | 只生成已批准的素材，每张**锚定参考图区域**生成、生成后逐一对照检查 | 素材成品 + 复刻简报 | ✅ 接受素材 |\n| **5 · 高保真复刻与 QA** | 交给 builder 契约做 1:1 实现，逐区对照参考图，**用 DOM 数字对账几何** | 网站 + 保真台账 | — |\n\n---\n\n## 安装与使用\n\n```bash\nnpx skills add Sac-Y\u002Fidentity-skill\n```\n\n装好后，在 Codex 里直接描述你的需求即可触发：\n\n```\n「用 identity-skill 帮我做个求职用的个人网站，我有 LinkedIn」\n「照着这几张参考图 1:1 还原成网页」\n「帮我做个作品集站，风格大胆一点，给我几个方向选」\n```\n\n它会从第一步开始，在每个确认关卡停下来等你拍板。\n\n### 依赖与兼容\n\n- **图像生成**：优先用已安装的 `imagegen-frontend-web`；没有则读内置适配版，或写好提示词让你贴到 GPT web Image 2。\n- **前端实现**：优先用已安装的 Build Web Apps `frontend-app-builder`；没有则用内置中文翻译版。\n- **素材拆分**：内置 `reference-asset-splitter`，无需单独安装。\n- 三份配套引用都已随本 skill 打包，**装这一个就够了**。\n\n---\n\n## 敬请期待\n\n还在持续迭代，接下来计划：\n\n- **不止 Codex**：补上其他 Agent 的使用示例，图片生成也接入 Image 2 之外的模型 API。\n- **动效**：让生成的网站带上你想要的交互与动效。\n- **更多风格**：改进设计 taste，增添多种不同风格的预设模板。\n- **打磨流程**：继续完善整体的设计流程。\n\n关注本仓库，持续更新中。\n\n---\n\n## 致谢\n\n第二步参考图生成使用了 [Taste Skill](https:\u002F\u002Fgithub.com\u002FLeonxlnx\u002Ftaste-skill) 的 `imagegen-frontend-web`（by [Leonxlnx](https:\u002F\u002Fgithub.com\u002FLeonxlnx) · MIT）。感谢！\n\n---\n\n## License\n\n[MIT](LICENSE) © Sac-Y\n","Identity Skill 是一个面向 AI 编程代理（如 Codex）的插件，用于按视觉参考图高保真生成个人网站。其核心采用「设计先行、确认再建」工作流：先基于用户资料生成多风格选项，再逐分区输出横向参考图供人工确认，随后拆解素材几何信息、生成并评审素材，最终由前端构建器严格对照参考图实现 DOM 级还原。项目内置图像生成、素材拆分与网页构建三类能力，开箱即用，无需额外安装依赖。适用于求职者、创作者、开发者等需快速打造专业、定制化数字名片或作品集网站的场景。",2,"2026-07-11 02:30:45","CREATED_QUERY"]