@Saccc_c: If you want the personal website effect shown in the video, follow this repo in one click: https://github.com/Sac-Y/identity-skill…

X AI KOLs Timeline 07/10/26, 04:01 AM Tools

codex personal-website image-to-code skill design-to-code open-source

Summary

Introducing an open-source skill that allows Codex to accurately recreate personal websites from reference images, locking in the design through a five-step workflow before generating code.

If you want the personal website effect in the video Follow this repo in one click: https://t.co/O8QUezn3qV https://t.co/lSSFQkuYnx

Original Article

View Cached Full Text

Cached at: 07/10/26, 04:14 PM

If you want the personal website effect from the video, follow this repo: https://t.co/O8QUezn3qV https://t.co/lSSFQkuYnx

Sac-Y/identity-skill

Source: https://github.com/Sac-Y/identity-skill 🌐 中文 · English

Identity Skill

「Give it reference images. Get back a 1:1 replica personal website.」 “Hand it the reference images. Get back a personal site that actually matches them.”

License Codex (https://openai.com/codex) Skills (https://skills.sh)

First produce reference images, then write code. You review the design first, then implementation replicates it.

Use Image 2 to generate reference images for each section. After you confirm, we do a 1:1 replica. Design is handed to the most powerful image model, compensating for Codex’s weakness; before writing the first line of code, you have already seen and locked in the design.

npx skills add Sac-Y/identity-skill

Primarily for Codex, once installed, just speak to trigger.

Demo · Why You Need It · Five-Step Workflow · Installation & Usage

Demo

The following websites were all generated by this skill:

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

2 · Links (well-known travel photography blogger in China) https://github.com/user-attachments/assets/54c89d13-f7a7-4e0c-ba77-5f9b236b2cda

3 · Sac (repo author) https://github.com/user-attachments/assets/31ccce26-ace5-41e4-909d-12603cce96b6

Why You Need It

When agents build websites, they usually jump straight into writing code—you can’t see the design, you just wait for it to finish, and its taste is unpredictable.

This skill does the opposite: it uses Image 2 to generate reference images for each section for you to approve, then faithfully reproduces them. You lock in the design before any code is written; the implementation only handles the replication.

Five-Step Workflow

Each step produces a clear output, and the first four steps have blocking checkpoints—you make the call at key decision points, instead of waiting for a whole wrong website to be built.

Step	What it does	Output	Checkpoint
1 · Content & Style Lockdown	Reads your resume/LinkedIn/project links, determines site structure and sections, recommends up to 3 visually imaginable style directions	Content & site structure document + style options	✅ Confirm content & style
2 · Reference Image Lockdown	Generates one horizontal reference image per section, performs consistency + monotonicity review (including ‘gray block test’)	Set of reference images per section	✅ Accept reference images
3 · Asset Breakdown List	Disassembles each reference image: what stays in code, what becomes background images, what becomes foreground assets, and measures each asset’s geometry (bounding box, aspect ratio, width percentage)	Reference image → build mapping + asset list	✅ Confirm breakdown plan
4 · Asset Generation Review	Only generates approved assets, each anchored to the reference image region, and checks them one by one after generation	Final assets + replication brief	✅ Accept assets
5 · High-Fidelity Replication & QA	Hands over to the builder contract for 1:1 implementation, compares each section against reference images, verifies geometry using DOM numbers	Website + fidelity ledger	—

Installation & Usage

npx skills add Sac-Y/identity-skill

Once installed, describe your needs directly in Codex to trigger:

「Use personal-website to build a job-hunting personal site for me, I have a LinkedIn」
「Replicate these reference images into a 1:1 web page」
「Help me build a portfolio site, make it bold, and give me a few directions to choose from」

It will start from step one and pause at each checkpoint for your approval.

Dependencies & Compatibility

Image generation: Prioritizes the installed imagegen-frontend-web; if not available, reads the built-in adapted version, or writes prompts for you to paste into GPT web Image 2.
Frontend implementation: Prioritizes the installed Build Web Apps frontend-app-builder; if not available, uses the built-in Chinese-translated version.
Asset breakdown: Built-in reference-asset-splitter, no separate installation needed.
All three companion references are bundled with this skill, installing this one is enough.

What’s Next

Still iterating, next plans:

Beyond Codex: Add usage examples for other agents, and connect image generation to APIs beyond Image 2.
Animations: Let the generated sites include the interactions and animations you want.
More styles: Improve design taste, add various preset templates with different styles.
Polish workflow: Continue refining the overall design process.

Follow this repo, updates ongoing.

Acknowledgments

The reference image generation in step 2 uses imagegen-frontend-web from Taste Skill (by Leonxlnx · MIT). Thanks!

License

MIT © Sac-Y