Illustrative Claude Academy recommendation linking to the official Claude Code learning resource.
プロジェクトのスクリーンショットこのスキルについて
Build distinctive web interfaces with content-informed typography, composition and visual direction. The project’s frontend stack and a browser for visual inspection.
おすすめする理由
Useful when a frontend needs a deliberate visual direction. It combines a clear aesthetic choice with working interface code and attention to typography, space, motion and responsive behavior.
役立つこと
- Build a product landing page.
- Design an editorial web experience.
- Improve a component's visual quality.
How this skill works
1. Ground visual choices in the subject and audience
Identify the page's purpose and choose a specific aesthetic direction before coding.
2. Build the interface with real content and interactions
Implement the interface with distinctive typography, composition and purposeful interactions.
3. Critique responsive behavior, accessibility and visual consistency
Refine visual detail and responsive behavior without relying on generic layout formulas.
An example task
Try this brief: “Build a distinctive landing page for a fictional independent architecture journal.”
The preview is an original SkillHey illustration of this task. Its content is fictional and is not an official Anthropic screenshot or an agent benchmark.
Second example
Try this brief: “Build an original online shop page for a fictional coffee roastery called Common Ground.”
Install this skill or its official plugin
For this skill alone, copy its complete directory into the project Skills root using the command above. The final entry is .claude/skills/frontend-design/SKILL.md. Keep references, scripts and assets with it.
| コマンド | 用途と使いどころ |
|---|---|
/plugin marketplace add anthropics/skills | Register the official Claude Code marketplace. |
/plugin install example-skills@anthropic-agent-skills | Install the official plugin. This may include other skills; see its manifest. |
Official repository and plugin manifestClaude Code skill installation documentation
Dependencies and license
The project’s frontend stack and a browser for visual inspection.
The recipe is free to access; running an agent or external service may have its own costs.
Review this skill’s LICENSE.txt before redistributing its files.
Official frontend-design instructionsOfficial repository and plugin manifest
使う前に
- The project’s frontend stack and a browser for visual inspection.
対応エージェント
よくある質問
Is this a separate skill?
Yes. frontend-design has its own SKILL.md and directory. It also belongs to the Anthropic Official Skills topic.
資料・参照元
元の資料は以下のリンクから確認できます。実践のヒントは SkillHey による編集上の提案です。
