Web Design Layout Assistant
Paste the following prompt into your AI chat to install this skill:
Install @user_3ef5c419/web-design-layout by following https://skillhub.cn/install/skillhub.md.
About this skill
Problem Being Solved
Many front-end tasks are not about missing components, but about inconsistent design decisions: weak first viewport, uneven spacing, inconsistent color, awkward mobile wrapping, and risky manual edits to existing pages. Web Design Layout Assistant targets these concrete issues with a practical workflow for new pages and page refinement.
How It Works and Where It Fits
The skill separates work into two paths:
- Design a new page: collect purpose, audience, style, and content modules, then start from built-in templates such as hero-basic.html, navbar.html, cards-grid.html, or full-landing-page.html, and finalize color, typography, content, and layout as self-contained HTML.
- Improve an existing page: audit the current visual problems, propose traceable changes, and adjust CSS, structure, and layout item by item while preserving existing functionality and interactions.
Outputs emphasize mobile-first behavior, semantic HTML5, CSS custom properties, accessibility, and Chinese typography; more detailed color, spacing, and typography guidance can be drawn from references/design-system.md. It fits landing pages, home pages, service pages, and feature showcases, but it does not replace complex business logic or large-scale design-system-dependent front-end work.
Use Cases
- Build a product launch landing page with hero, features, and CTA.
- Fix spacing, color, and mobile wrapping on an existing home page.
- Assemble an event page from card, feature, and footer templates.
- Check headings, alt text, and CSS variables for consistency.
Best For
- Front-end engineer shipping marketing pages and needing deployable self-contained HTML.
- Product manager turning product benefits into hero, features, and service lists.
- Front-end maintainer refactoring an old site while preserving interactions.
- Web page creator standardizing Chinese line-height, font stack, and accessibility details.
Related Skills
Enter a material name to get preview and download links for free, commercially usable video assets, with paid platform options, pricing, and search suggestions when results are limited.
Restyle a short video into a new visual style while preserving core elements such as characters, actions, and composition, suitable for various creative conversions like anime, illustration, ink wash, etc.
Create Douyin vertical video covers from topics, hooks, or materials with support for creative generation, image synthesis, and refinement.
An AI tool that transforms real photos into specified illustration styles while preserving subject recognition.