我愿称Sac老师为个人网站的神！从未见过这么牛逼的用Codex搭建个人网站的方法！

高级感个人网站搭建，小白上手的保姆级教程：

1. 用 Codex 分析社媒数据，整理详细的网站内容文档。 这一步可以参考所有社媒网站，X可以在“设置和隐私”-“你的账号”里面，下载你的所有数据，让Codex帮你分析，然后整理成一份Markdown文档。这一步可能需要人工精修一下，毕竟只有你知道到底哪些重点需要呈现在网站上。

2. 利用Codex+taste skill 生成高质量的网页参考图 GitHub地址：https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md… 这一步没有让Codex直接开始干活，而是先生成参考图，确认和Codex对齐视觉效果之后，才继续开发步骤，真是神来一笔！

3. 用Codex分析拆解参考图结构，关键素材用ImageGen单独生成图片 因为很多关键的素材代码生成效果不好，所以需要用到Codex内置的ImageGen插件进行单独图片素材生成，更加美观优雅！

4. 利用Codex的Build Web Apps插件的Frontend App Builder skill将网页参考图复刻成真实网页

谁说Codex做不出来前端精美的网页，Sac老师这一波真的狠狠打脸这群人了

https://x.com/Saccc_c/status/2071508004772475209/video/1…

Leonxlnx/taste-skill

Source: https://github.com/Leonxlnx/taste-skill

Taste Skill

The Anti-Slop Frontend Framework for AI Agents

Sponsors

_{Emil Kowalski · animations.dev}

_{Become a sponsor}

Portable Agent Skills that upgrade AI-built interfaces: stronger layout, typography, motion, and spacing instead of boilerplate-looking UIs. This repo also includes image-generation skills for reference boards (web, mobile, brand kits). Pair them with ChatGPT Images or similar generators, then hand the frames to Codex, Cursor, or Claude Code for implementation.

Disclaimer

Taste Skill has no official token, coin, or crypto project. Any token using my name, image, or project is unaffiliated and not endorsed by me.

_{Disclaimer · Install · Skills · Settings · Examples · Sponsors · Research · FAQ · License}

Feedback & Contributions

We would love your feedback. Suggestions and bug reports:

• Open a Pull Request or Issue on GitHub
• DM @lexnlin or @blueemi99
• Email us at [email protected]

Installing

The npx skills add CLI scans the skills/ folder in this repo, so all skills below (code and image-generation) install the same way.

npx skills add https://github.com/Leonxlnx/taste-skill

Install a single skill by its install name (the name: field inside the SKILL frontmatter, not the folder name):

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

You can also copy any SKILL.md into your project or paste it into ChatGPT / Codex conversations.

Updating from the previous version

The default taste-skill (install name design-taste-frontend) is now v2 (experimental), a substantial rewrite of the original v1. If you already have v1 installed, just re-run the install command and you will be upgraded:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

The install name did not change, so no script updates are needed. The newer SKILL.md replaces the older one in place.

If you depend on the exact behavior of v1 and want to pin to it explicitly:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

See CHANGELOG.md for the full v1 to v2 diff and the rationale.

Skills

Each skill does one job; you do not need all of them at once. Implementation skills output code. Image-generation skills output reference images only.

The Install name column is the exact value you pass to --skill.

Image generation skills

These produce design images only (no code). Use with ChatGPT Images, Codex image mode, or any agent that generates images.

Which one should I use?

• Start with taste-skill for the safest general default. (Now v2 experimental - see what changed in the CHANGELOG.)
• If you depend on the exact behavior of the original taste-skill, install taste-skill-v1 instead.
• Use gpt-taste when you want the stricter GPT/Codex-oriented rules and motion/layout enforcement.
• Use image-to-code-skill for image → analyze → code website workflows.
• Use redesign-skill to improve an existing codebase instead of greenfield styling.
• Add soft-skill, minimalist-skill, or brutalist-skill when the visual direction is already chosen.
• Add output-skill if the agent keeps truncating output.
• Use imagegen-frontend-web, imagegen-frontend-mobile, or brandkit when the deliverable is images (comps, flows, identity boards), then pass results to your coding agent.

Image-first tip

For image-to-code-skill, state the pipeline in the prompt, e.g.: follow the skill: generate images, then analyze, then code.

ChatGPT Images and Codex

Attach or paste imagegen-frontend-web, imagegen-frontend-mobile, or brandkit and ask for the frames you need, then feed the renders to Codex, Cursor, or Claude Code. Use image-to-code-skill when you want one workflow that both generates references and implements the site in code.

Settings (taste-skill only)

Numbers at the top of the file are 1-10 dials:

• DESIGN_VARIANCE: Layout experimentation (lower: centered/clean · higher: asymmetric/modern).
• MOTION_INTENSITY: Animation depth (lower: hover · higher: scroll/magnetic).
• VISUAL_DENSITY: Information per viewport (lower: spacious · higher: dense dashboards).

Examples

Created with taste-skill:

Support the project

If Taste Skill helps you, consider sponsoring:

Sponsor on GitHub

Current Sponsors

Research

Background writing that shaped these skills lives in research/.

Star History

Common Questions

How is this different from other AI design skills?
Multiple specialized variants, adjustable dials in key skills, anti-repetition rules informed by dedicated research. All are framework agnostic across major coding agents.

Does it work with React, Vue, Svelte?
Yes. Rules target design intent, not a single framework API.

What is SKILL.md?
A portable instruction file agents can load automatically; install via npx skills add or by copying into a repo or conversation.

Do image-generation skills install with npx skills add?
Yes. They live under skills/ alongside the code skills so the same CLI discovers them.

License

MIT License · Copyright (c) 2026 Leonxlnx