tangzhan-webpage-designer_skill

Overview

This skill converts any plain text into a single-file, responsive HTML webpage with a distinct design style. It contains a curated library of 30+ design styles and acts as an intelligent design advisor that recommends the best visual treatment for your content. The goal is fast, polished pages that match tone, audience, and purpose.

How this skill works

The skill analyzes the input text to determine tone, audience, and intent, then selects a matching style from a 30-style matrix or accepts a user-specified style. It loads the chosen style system and merges its rules with the user content to generate a standalone HTML file. The output is responsive, self-contained, and follows the chosen style’s color, typography, and layout guidance.

When to use it

• You need a quick single-file landing page from a press release, article, or product description.
• You want a style-matched portfolio or case study page without hand-designing CSS.
• You need design advice and an example when deciding visual direction for content.
• You want to prototype multiple style variations for the same copy quickly.
• You need a readable, responsive HTML export for publishing or sharing.

Best practices

• Provide clear intent and audience in the prompt to get stronger style recommendations.
• If you have a desired look, name the style (e.g., Cyberpunk, Monochrome) to lock the output.
• Keep content structure (headings, bullets, CTAs) explicit to preserve hierarchy in the page.
• Review the generated HTML for brand-specific fonts or assets and swap as needed.
• Test responsiveness on mobile and desktop; minor tweaks to spacing may be required for edge cases.

Example use cases

• Turn a product description and features list into a SaaS-style landing page with CTA.
• Convert a technical blog post into a Terminal or Modern Dark developer page.
• Make a personal portfolio page from a short bio and project list using Bauhaus or Bold Typography.
• Generate an event promo page with Kinetic or Maximalism style for shareable visuals.
• Produce a printable-styled article using Newsprint or Academia for long-form reading.