@Saccc_c: 如果你想拥有视频中的个人网站效果 一键关注这个仓库：https://github.com/Sac-Y/identity-skill…

X AI KOLs Timeline 工具
codex personal-website image-to-code skill design-to-code open-source

摘要

介绍一个开源 skill，让 Codex 能够根据参考图高保真还原个人网站，通过五步工作流锁定设计后再生成代码。

如果你想拥有视频中的个人网站效果 一键关注这个仓库：https://t.co/O8QUezn3qV https://t.co/lSSFQkuYnx
查看原文
查看缓存全文

缓存时间: 2026/07/10 16:14

如果你想拥有视频中的个人网站效果

一键关注这个仓库：https://t.co/O8QUezn3qV https://t.co/lSSFQkuYnx

Sac-Y/identity-skill

Source: https://github.com/Sac-Y/identity-skill

🌐 中文 · English

Identity Skill

「给它参考图，拿回一个 1:1 还原的个人网站。」 “Hand it the reference images. Get back a personal site that actually matches them.”

License Codex Skills


先出参考图，再写代码。设计你先过目，实现照图还原。

用 Image 2 把每个分区的设计出成参考图，你确认后再做 1:1 还原。设计这一步交给最强的图片模型，补上 Codex 的短板；写第一行代码前，你已经看过并锁定了设计。

npx skills add Sac-Y/identity-skill

主要面向 Codex，装好后直接说话即可触发。

案例演示 · 为什么需要它 · 怎么工作 · 安装与使用

案例演示

以下网站都是用该 skill 生成：

1 · 马斯克

https://github.com/user-attachments/assets/8396b561-5f30-40a8-92d0-e8655337193c

2 · links（国内知名旅游摄影博主）

https://github.com/user-attachments/assets/54c89d13-f7a7-4e0c-ba77-5f9b236b2cda

3 · Sac（仓库作者）

https://github.com/user-attachments/assets/31ccce26-ace5-41e4-909d-12603cce96b6

为什么需要它

让 agent 做网站，通常是它直接开始写代码——你看不到设计长什么样，只能等它做完，而它的审美又不稳定。

这个 skill 反过来：先用 Image 2 把每个分区的设计出成参考图给你确认，再照图高保真还原。你在写代码前就锁定了设计，实现只负责还原。

五步工作流

每一步都有明确产物，前四步之间有阻塞式确认关卡——你在关键决策点拍板，而不是等它做完一整个错的网站。

步骤做什么产物确认关卡
1 · 内容与风格锁定读你的简历/LinkedIn/项目链接，定站点形态和分区，推荐最多 3 个可视觉想象的风格方向内容与站点形态文档 + 风格选项✅ 确认内容和风格
2 · 参考图锁定每个分区出一张横向参考图，做一致性 + 单调性双向审查（含「灰块测试」）分区参考图集合✅ 接受参考图
3 · 素材拆分清单逐张拆解参考图：哪些留代码、哪些出背景图、哪些出前景素材，并测量每个素材的几何（包围盒、长宽比、占宽 %）参考图→构建映射 + 素材清单✅ 确认拆分方案
4 · 素材生成评审只生成已批准的素材，每张锚定参考图区域生成、生成后逐一对照检查素材成品 + 复刻简报✅ 接受素材
5 · 高保真复刻与 QA交给 builder 契约做 1:1 实现，逐区对照参考图，用 DOM 数字对账几何网站 + 保真台账—

安装与使用

npx skills add Sac-Y/identity-skill

装好后，在 Codex 里直接描述你的需求即可触发：

「用 personal-website 帮我做个求职用的个人网站，我有 LinkedIn」
「照着这几张参考图 1:1 还原成网页」
「帮我做个作品集站，风格大胆一点，给我几个方向选」

它会从第一步开始，在每个确认关卡停下来等你拍板。

依赖与兼容

  • 图像生成：优先用已安装的 imagegen-frontend-web；没有则读内置适配版，或写好提示词让你贴到 GPT web Image 2。
  • 前端实现：优先用已安装的 Build Web Apps frontend-app-builder；没有则用内置中文翻译版。
  • 素材拆分：内置 reference-asset-splitter，无需单独安装。
  • 三份配套引用都已随本 skill 打包，装这一个就够了。

敬请期待

还在持续迭代，接下来计划：

  • 不止 Codex：补上其他 Agent 的使用示例，图片生成也接入 Image 2 之外的模型 API。
  • 动效：让生成的网站带上你想要的交互与动效。
  • 更多风格：改进设计 taste，增添多种不同风格的预设模板。
  • 打磨流程：继续完善整体的设计流程。

关注本仓库，持续更新中。

致谢

第二步参考图生成使用了 Taste Skill 的 imagegen-frontend-web（by Leonxlnx · MIT）。感谢！

License

MIT © Sac-Y

相似文章

@gengdaJ: 我愿称Sac老师为个人网站的神！从未见过这么牛逼的用Codex搭建个人网站的方法！ 高级感个人网站搭建，小白上手的保姆级教程： 1. 用 Codex 分析社媒数据，整理详细的网站内容文档。 这一步可以参考所有社媒网站，X可以在“设置和隐私…

X AI KOLs Following

介绍使用Codex和taste skill搭建个人网站的保姆级教程，包括分析社媒数据、生成参考图、拆解结构等步骤，适合小白上手。