website-design

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: website-design
description: Contemporary website and web-app design direction for landing pages, marketing sites, portfolios, SaaS dashboards, product pages, and frontend UI reviews. Use when the agent needs to design, build, restyle, critique, or art-direct a modern web experience; choose current visual systems, section rhythm, hero composition, typography, color/material treatment, motion, responsive behavior, and anti-generic checks. Triggers include requests for trending website design, premium UI, Awwwards-style direction, MotionSites-style hero prompts, imagegen inspiration, Mobbin app/web references, conversion-focused landing pages, modern SaaS websites, website redesigns, design-system direction, UI polish, visual QA, and avoiding AI-looking web layouts.
---

# Website Design

## Operating Mode

Create web experiences that feel current, specific, usable, and implementation-ready. Treat trends as tools, not decoration. Every design choice must serve the product, audience, content hierarchy, conversion path, or interaction clarity.

Default to high craft:

- Strong first-viewport concept, not a generic centered hero.
- Typography as a primary design material.
- Images, product visuals, or tactile media as structural elements when the brief allows.
- One coherent design system across the full page.
- Responsive, accessible, fast, and shippable implementation.

## Workflow

1. Parse the brief: audience, product category, conversion goal, brand maturity, content density, stack, and constraints.
2. Choose the register:
   - `brand`: marketing, landing, creator, campaign, portfolio, editorial, and product-story pages where design carries identity and persuasion.
   - `product`: SaaS tools, dashboards, admin panels, workflow surfaces, settings, forms, onboarding, and data-heavy UI where design serves repeated use.
3. Gather references before designing when the task is open-ended: use Mobbin MCP for real app/product patterns when available, current web sources for public landing-page trends, and imagegen for 2-4 quick visual exploration comps when the user wants inspiration or a strong visual direction.
4. Choose a design thesis in one sentence: the visual world, emotional tone, and interaction promise.
5. Set design dials: visual ambition, information density, image reliance, motion level, conversion discipline, implementation clarity, and brand fidelity.
6. Select a pattern stack: hero architecture, section rhythm, typography character, palette/material system, component language, and motion behavior.
7. Apply the relevant review mode when the user asks for a specific kind of work: `shape`, `critique`, `polish`, `harden`, `typeset`, `layout`, `adapt`, or `clarify`.
8. Implement or describe the design with concrete decisions: layout, spacing, type scale, images, states, responsive behavior, and accessibility.
9. Run the deterministic anti-pattern pass and QA checklist before completion. If building code, verify in browser at desktop and mobile widths.

## Load References

- Read `references/trend-intelligence-2026.md` when the user asks for trending/current/modern design, or when choosing a direction from scratch.
- Read `references/inspiration-research.md` when using Mobbin MCP, imagegen, MotionSites/Viktor Oddy-style prompt inspiration, or any external visual references.
- Read `references/art-direction-matrix.md` when designing a page, hero, landing page, visual concept, or image-generation prompt.
- Read `references/qa-checklist.md` before claiming a design, frontend implementation, or UI review is complete.

## Design Rules

- Avoid default AI web patterns: purple-blue glow gradients, floating blobs, generic dashboard cards, repeated centered sections, weak startup copy, and cloned text-left/image-right blocks.
- Do not make every section a card. Use full-width bands, editorial compositions, image-led sections, restrained bento grids, and negative space.
- Use bento grids only when the content benefits from mod