tangzhan-webpage-designer

Text to Webpage Converter

Introduction

This skill converts user-provided text content into a single-file, responsive HTML webpage. It leverages a library of 30 unique design styles (sourced from designprompts.dev). This skill is designed to act as a "design consultant": it analyzes the user's text, recommends the most suitable style, or accepts a style request specified by the user.

Core Logic

1. Analyze Content: Determine the tone, audience, and purpose of the user's text.
2. Select Style：
   • User-specified: If the user requests a specific style (e.g., "cyberpunk"), match it in the [Style Matrix].
   • Intelligent Recommendation: If not specified, select the most fitting style from the [Style Matrix] based on the content analysis results.
   • Tiebreaker Mechanism: If multiple styles are suitable or the content is fairly neutral, choose based on visual diversity or "consultant's pick" (and provide a persuasive rationale).
3. Load Prompt: From the references/ directory, read the corresponding design system file (e.g., references/cyberpunk.md）。
4. Generate Webpage: Combine the loaded style prompt with the user content to generate HTML code.

Style Matrix

Use this matrix to determine which style to choose.

ID	Style Name	Visual Vibe	Best For	Keywords	Reference File
01	Monochrome	Rigorous, editorial, high contrast	Fashion, architecture, luxury blogs	Black and white, serif, sharp	references/monochrome.md
02	Bauhaus	Geometric, constructivist, bold	Posters, art portfolios, creative agencies	Primary colors, shapes, asymmetry	references/baohaus.md
03	Modern Dark	Cinematic, atmospheric, glowing	Developer tools, SaaS, high-tech	Dark mode, gradients, spotlight	references/modernDark.md
04	Newsprint	Authoritative, dense, classic	News, blogs, long-form reading	Grid, serif, off-white, borders	references/newsprint.md
05	SaaS	Clean, trustworthy, modern	Startups, product landing pages	Blue accents, Inter font, whitespace	references/saas.md
06	Luxury	Elegant, spacious, premium	Jewelry, high-end services, hotels	Gold, serif, minimalist, slow motion	references/luxury.md
07	Terminal	Retro-futuristic, hacker, raw	Dev blogs, CLI tools, cryptocurrency	Monospace font, green/black, cursor	references/terminal.md
08	Swiss Minimalist	Objective, grid-based, rational	Corporate reports, architecture, Swiss design	Helvetica, red accents, rigorous grid	references/swissMinimalist.md
09	Kinetic	Dynamic, moving, loud	Event promotion, portfolios, trends	Marquee, large text, motion effects	references/kinetic.md
10	Flat Design	2D, colorful, simple	Illustration portfolios, fun apps	Solid colors, no shadows, vector feel	references/flatDesign.md
11	Art Deco	Decorative, geometric, gold	Invitations, history, speakeasies	Gold lines, symmetry, 1920s	references/artDeco.md
12	Material Design	Tactile, familiar, Google style	Android apps, dashboards	Shadows, ripples, paper hierarchy	references/materialDesign.md
13	Neo Brutalism	Raw, unpolished, bold	Gen Z brands, art, avant-garde blogs	High contrast, default fonts, thick borders	references/neoBrutalism.md
14	Bold Typography	Loud, text-driven, graphic	Manifestos, statements, posters	Giant text, negative space	references/boldTypography.md
15	Academia	Traditional, warm, academic	Universities, research, literature	Beige, serif, red/gold, paper	references/academia.md
16	Cyberpunk	Dystopian, neon, glitch	Games, sci-fi, nightlife	Neon pink/blue, glitch style, dark	references/cyberpunk.md
17	Web3	Digital, financial, deep	Cryptocurrency, NFT, fintech	Orange/blue, dark, data visualization	references/web3.md
18	Playful Geometric	Fun, energetic, shapes	Children, creative agencies, startups	Memphis style, bright colors	references/playfulGeometric.md
19	Minimal Dark	Smooth, soft, frosted	Personal websites, notes, mood boards	Dark gray, amber glow, frosted glass	references/minimalDark.md
20	Claymorphism	Soft, 3D, toy-like	Friendly apps, education	3D, shadows, macaron colors, rounded	references/claymorphism.md
21	Professional	Classic, clean, serif	Law firms, resumes, consulting	Ivory white, serif, balanced	references/professional.md
22	Botanical	Organic, natural, soft	Health, food, nature	Earth tones, rounded, green	references/botanical.md
23	Vaporwave	Nostalgic, surreal, pink	Music, retro blogs, art	80s, pink/cyan, grid, statues	references/vaporwave.md
24	Enterprise	Reliable, corporate, blue	B2B, large organizations, intranets	Indigo, isometric, clean	references/enterprise.md
25	Sketch	Hand-drawn, casual, rough	Notes, DIY, personal blogs	Doodles, pencil, paper	references/sketch.md
26	Industrial	Technical, raw, engineering feel	Hardware, tools, specifications	Orange, gray, monospace, lines	references/industrial.md
27	Neumorphism	Soft, physical, raised	Smart home, control panels, players	Soft shadows, monochrome	references/neumorphism.md
28	Organic	Flowing, natural, wabi-sabi	Ceramics, wellness, lifestyle	Speckled shapes, texture, earth tones	references/organic.md
29	Maximalism	Chaotic, busy, expressive	Independent magazines, art, fashion	Clashing colors, dense, patterns	references/maximalism.md
30	Retro	Nostalgic, lo-fi, pixel	Old tech, games, archives	Windows 95, pixel, beige	references/retro.md

Execution Instructions

1. Selection: First, tell the user which style you chose, andwhy。
   • Example: "Given the highly technical nature of your content, I chose the 'Terminal' style to give it a retro-futuristic hacker vibe."
2. Tool Use: Use the read tool to read the corresponding Reference File content in the matrix above.
3. Generate：
   • Pass the user text and reference file content to your coding model.
   • Instructions for the coding model: "You are an expert front-end engineer. Please use the design system defined in the reference content to convert the user's text into a single-file HTML webpage. Ensure strict adherence to the color, font, and layout rules defined in the reference file."