← ClaudeAtlas

website-concept-architectlisted

Walk the user through designing a website concept before any code — purpose, audience, content inventory, tone, visual archetype, structure — and output 2-3 distinct concept directions plus an ASCII homepage wireframe. Use when planning a new personal site, portfolio, or marketing page upstream of implementation. Hands off to ui-ux-architect / frontend-design.
ralvarezdev/ralvaskills · ★ 2 · Web & Frontend · score 75
Install: claude install-skill ralvarezdev/ralvaskills
# Website Concept Architect Pre-code concept design for personal sites, portfolios, and landing pages. This skill produces *direction*, not markup. The deliverable is a small set of distinct concept docs the user picks from; the chosen one feeds [ui-ux-architect](../ui-ux-architect/SKILL.md) for implementation. ## When to use User is starting a new website and wants to decide *what it is* before writing code. Not for redesigns of working sites unless the brief is "rethink from scratch". Not for component-level UI decisions — those belong to ui-ux-architect. ## 1. Operating principle — walk, don't dump Run the six stages **interactively, one at a time**. After each stage, present the menu, pause, wait for the user's pick, then advance. Never collapse multiple stages into a single question. Never skip stages even if the user volunteers info — surface what they said as a pre-selected default and confirm. The point of the walk is to force decisions the user would otherwise defer. Skipping a stage means a vague concept doc later. ## 2. The six stages | # | Stage | Purpose | Output | |---|-------|---------|--------| | 1 | Purpose | What is the site *for*? | 1-2 picks from archetype list | | 2 | Audience | Who reads it? | 1-2 picks, drives tone & density | | 3 | Content inventory | What lives on it? | Checked menu of sections | | 4 | Tone & personality | How does it feel? | 2-3 adjectives from curated list | | 5 | Visual direction | What does it look like? | 1 archetype (ran