Claude Code 如何避免生成千篇一律的登陸頁面

DEV Community

0 Add reaction

0 Like 0 Unicorn 0 Exploding Head 0 Raised Hands 0 Fire

0 Jump to Comments 0 Save Boost

Pick as gem

Copy link

Copied to Clipboard

Share to X Share to LinkedIn Share to Facebook Share to Mastodon

Share Post via...Report Abuse

Deduped Posted on Oct 31•Originally published at dedupedai.com

Stop Claude Code from building the same generic landing page

#ai #claude #design #webdev

Ask Claude for a landing page and you tend to get the same thing: a warm cream background, a terracotta accent, identical rounded cards with soft shadows and an all-caps eyebrow above every heading. The frontend-design skill in Anthropic's example skills repo exists to break that habit. Below is the route with the real commands. The short version is on the Deduped use-case page.

What the skill does

Skills are folders of instructions, scripts and resources that Claude loads when a task calls for them. frontend-design makes Claude commit to a bold aesthetic direction and a reviewed design plan before it writes any UI code. It even lists the generic defaults to avoid.

Install

In Claude Code, register the repo as a plugin marketplace:

/plugin marketplace add anthropics/skills

Then install the example skills, which include frontend-design:

/plugin install example-skills@anthropic-agent-skills

Give it a real brief

Tell Claude the real subject, the audience and the primary job of the page. If the brief leaves the subject out, the skill has Claude propose one and confirm it with you, so you will not get lorem ipsum branding.

Ask for the plan first

Before any code, ask for a design plan:

4 to 6 named hex colors
the typefaces and their roles
a layout concept with ASCII wireframes
the principles that make this page unique

Review the plan

Have Claude check the plan against your brief and rewrite any part that reads like a generic default, saying what changed and why. This one step is where most of the improvement comes from, because it is cheap to change a plan and expensive to change a finished page.

Check the quality floor

The result should be responsive down to mobile, show visible keyboard focus and respect reduced motion. Test each of those yourself before shipping.

A prompt you can paste

Use the frontend-design skill from anthropics/skills to design a landing page for my product. Before writing any code, give me a design plan: 4 to 6 named hex colors, the typefaces and their roles, a layout concept with an ASCII wireframe, and the principles. Review the plan against my brief, revise anything that reads like a generic default and tell me what you changed. Spend the boldness in one place, and keep it responsive down to mobile with visible keyboard focus and reduced motion respected.

Who it is for

A developer or founder who keeps getting the same templated look from generated UI.

Tip

Spend the boldness in one place. A page with one memorable element and a calm everything else usually beats a page where every section shouts.

For another Claude Code design option, see the Taste Skill walkthrough.

Want the setup commands for 50 AI repos people actually ship with? Get the free AI Repos That Actually Ship pack: https://dedupedai.com/ship-pack/?utm_source=devto&utm_medium=article&utm_campaign=shippack

Get one email every Monday with the week's hottest AI repos and exactly how to use them: subscribe free at dedupedai.com

Image 9: profile The DEV TeamPromoted

Report billboard

Build With Open Source AI and Win

The Hacktoberfest Open Source AI Challenge runs all month with new prompts and new winners each week.

Start Building

Promoted

Top comments (0)

Image 13: pic

Personal Trusted UserCreate template Templates let you quickly answer FAQs or store snippets for re-use.

Submit PreviewDismiss

Code of Conduct•Report abuse

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.

[x] Hide child comments as well

Confirm

For further actions, you may consider blocking this person and/or reporting abuse

Image 14: profile The DEV TeamPromoted

Report billboard

Five Challenges. Cash Prizes Every Week.

A new open source AI challenge drops every Monday in October. Build something, write it up, win.

See the Challenges

Promoted

Deduped

Deduped tracks the hottest AI repos on GitHub and shows exactly how to use them: step-by-step use cases, copy-paste agent prompts, and real builds from people using them.

Joined Oct 23, 2026

Missed Week One? Week Two Starts Monday.

Every Hacktoberfest challenge is its own shot at a cash prize. Jump in whenever you're ready.

Pick a Challenge

👋 Kindness is contagious

Report billboard

Dive into this insightful article, celebrated by the caring DEV Community. Programmers from all walks of life are invited to share and expand our collective wisdom.

A simple thank-you can make someone’s day—drop your kudos in the comments!

On DEV, spreading knowledge paves the way and strengthens our community ties. If this piece helped you, a brief note of appreciation to the author truly counts.

Let’s Go!

DEV Community — A space to discuss and keep up software development and manage your software career

Built on Forem — the open source software that powers DEV and other inclusive communities.

Image 23: DEV Community

We're a place where coders share, stay up-to-date and grow their careers.