skills.rest
ralvarezdev
ralvarezdevCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

website-concept-architect

Guide users through six concept-design stages to produce concept directions and an ASCII homepage wireframe.

3|Updated Feb 26, 2026
Search Tags:#website#wireframe#design-architecture#hand-off#concept-design#ux-planning#concept-doc
One-click install
npx skills add https://github.com/ralvarezdev/ralvaskills --skill website-concept-architect
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-concept-architect
Source: https://github.com/ralvarezdev/ralvaskills/tree/main/skills/frontend/website-concept-architect
Command: npx skills add https://github.com/ralvarezdev/ralvaskills --skill website-concept-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Planning a website concept before coding reduces ambiguity and accelerates alignment by delivering 2-3 distinct concept directions plus an ASCII homepage wireframe.

Core Features & Use Cases

  • Interactive six-stage concept walk (Purpose, Audience, Content inventory, Tone & personality, Visual direction, Synthesis) that outputs 2-3 concept directions and an ASCII homepage wireframe.
  • Stage-driven prompts guide decisions, surface tradeoffs, and produce concrete concept docs for hand-off to design teams.
  • Real-world use: ideal for planning personal sites, portfolios, or marketing pages upstream of implementation.

Quick Start

Start the interactive six-stage walk, respond to prompts, and review the 2-3 concept directions plus the ASCII homepage wireframe to choose one.

Frequently Asked Questions about website-concept-architect

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I plan a website concept before coding?▼

A homepage wireframe in this context is an ASCII text representation of the page layout. It is generated during the synthesis stage alongside 2-3 distinct concept directions to provide a concrete visual structure for hand-off to design teams.

Can I use this website concept design process for a portfolio or marketing page?▼

Yes, this concept design process is specifically applicable for planning personal sites, portfolios, and marketing pages. It guides users through interactive prompts to surface tradeoffs and produce concrete concept docs upstream of implementation.

What is the best way to create multiple distinct website design directions?▼

The best way to create multiple distinct website design directions is through a structured concept-design workflow. By walking through purpose, audience, and visual direction stages interactively, you can generate 2-3 unique concept docs with tradeoffs clearly identified.

How does a concept doc help with design hand-off to implementation?▼

A concept doc helps with design hand-off by structuring decisions across six stages, including tone, personality, and visual direction. It delivers concrete directions and an ASCII wireframe that directly transfer to ui-ux-architect for implementation.

Do I need any design software to generate an ASCII homepage wireframe?▼

No, you do not need external design software to generate an ASCII homepage wireframe. The interactive workflow produces the wireframe and structured concept docs directly through stage-driven prompts, outputting text-based layouts ready for review.

Related Skills

Explore More Design & Creative Skills→
pingmepipingmepi

pm-stage-01-brief

Generate a structured 7-section product brief from a business statement.

Community
Advanced
GitnappGitnapp

sketch

Create multiple interactive HTML mockups for comparing UI design directions.

Community
Intermediate
bakwankawabakwankawa

brainstorming

Structures brainstorming to produce 2-3 design directions with documented decisions.

Community
Basic
BellaBeBellaBe
37

product-design-wireframes

Convert user flows into wireframe specifications using atomic design hierarchy.

Community
Advanced