Taste Skill Real-world Test - One-click Improvement of AI Agent's Front-end Aesthetics
Today I'm sharing some things suitable for front-end developers. To be honest, some current AI agent front-ends have terrible aesthetics: overly centered layouts, card stacking, excessive use of gradients, unnatural white space and hierarchy, lack of rhythm in animations, and inconsistent font and spacing...
Today I'm sharing some things suitable for front-end developers.
To be honest, there are some now. AI Agent The front-end aesthetics are extremely poor, with layouts that are too centered, cards stacked, gradients overused, white space and hierarchy that are unnatural, animations that lack rhythm, and fonts and spacing that lack a sense of sophistication. The resulting web pages look cheap, and Codex is a prime example.
A few days ago, I finally found a project on GitHub called Taste Skill that could solve this problem.AI Agent The issue of poor aesthetics has led to approximately 40,000 stars in the project repository.
Taste Skill is oriented towards AI Agent A front-end design skills library, aiming to help AI Get rid of template-based, homogenized, and aesthetically unappealing front-end designs.
Transforming elements such as layout, typography, motion effects, spacing, visual density, and design language—which originally required design experience to judge—into something that can be... AI Agent Read and execute SKILL.md instructions to improve performance. AI Design judgment when generating interfaces.
Taste Skill currently includes various skill modules for different purposes, each module solving a specific problem:
- design-taste-frontendThe default Skill will infer the design language based on the requirements and control the output through several key dimensions, such as layout variability, animation intensity, and information density.
- gpt-taste:Suitable GPTThe strict version of /Codex has higher requirements for layout changes, GSAP animations, and detemplateization.
- image-to-codeSuitable for those who need to create a webpage reference image first, and then let... AI The scenario is restored to the front-end code.
- redesign-existing-projectsUsed to modify existing projects. First, review the existing UI, then fix issues related to layout, spacing, hierarchy, and visual style.
- high-end visual designThe visual style is high-end, restrained, and refined, emphasizing soft contrasts, white space, font texture, and natural animation effects.
- minimalist-uiIt features a modern, minimalist product interface similar to Notion and Linear, making it suitable for SaaS, tool-type products, developer products, and content-based back-ends.
- industrial-brutalist-uiIt features an industrial style, a rough feel, Swiss fonts, strong contrasts, and experimental layouts, making it suitable for more individualistic and sharper visual expressions.
- full-output-enforcementUsed for constraints AI Do not provide only incomplete solutions, placeholders, or omitted code; provide appropriate processing methods. Agent The problem is incomplete output.
- Image generation skillsThis includes imagegen-frontend-web, imagegen-frontend-mobile, and brandkit, used to generate reference images such as website visual drafts, mobile interface flows, and brand visual boards, which are then handed over to Codex, Cursor, or... Claude Code implementation.
npx skills add https://github.com/Leonxlnx/taste-skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"- Codex Test 1
Let's generate a webpage for both the case with and without Skill, and compare the results.
Prompt words:
Help me implement one from scratchAI Agent The product website's homepage does not use any special features.
Product Name: LoopPilot
Product Positioning: A tool to help teamsautomaticPlanning, execution, and review of tasks AI Agent Workbench.
Target users: Independent developers, small teamsAI Product Manager.
Page style: Avoid the typical SaaS template feel, large areas of blue-purple gradients, and excessive card clutter. The desired style is a sophisticated, restrained, and clear information hierarchy, while also incorporating a futuristic and tool-like aesthetic.
Please complete the following:
- Design a complete homepage
- Includes product name, main title, subtitle, main CTA, and secondary CTA.
– Showcase 3 core capabilities:automaticBreak down tasks, execute continuously, and review and optimize.
– A product interface preview area is needed, but it shouldn't look like a regular dashboard template.
– The first screen should have a clear visual memory point.
- Design style requirements
– Use non-template layouts to avoid centering and stacking all content.
– The font hierarchy should be clear, and the title should be impactful but not crude.
– Limit the color scheme to 3-5 primary colors.
– Animation effects are acceptable, but they should serve to convey information, not just show off technical skills.
– The page needs to be adapted for both mobile and desktop devices.
- Code requirements
– Please output the complete, runnable code directly.
- Do not use placeholders, and do not omit any critical code.
– Don't just offer design suggestions; actually implement the page.
– If using components, please ensure that all components are fully written.
– If styling is required, please provide the complete CSS/Tailwind class.
- Acceptance Standards
– The page should not look like AI Default generated SaaS template
- Clear visual hierarchy, obvious CTA
– The screenshot must also be valid at 9:16 on mobile devices.
– All text must not overflow or overlap.
– The final result should resemble the homepage of a real product launch.
Please briefly describe your design direction first, and then provide a complete implementation.
The version without Skills doesn't follow the typical SaaS homepage layout of "centered title + three cards + blue-purple gradient".
However, the product feel is weak. The workbench on the right is more like a decorative image. Users are attracted by the big titles and graphics, but in the end, they can't figure out how the product helps the team work or how it forms a closed loop.
It's still viewable on mobile devices, but the line breaks in the title are a bit abrupt.
Use Taste Skill:
Prompt words:
Please use the design-taste-frontend and full-output-enforcement tools from Taste Skill to help me implement one from scratch.AI Agent The product's official website homepage.
Product Name: LoopPilot
Product Positioning: A tool to help teamsautomaticPlanning, execution, and review of tasks AI Agent Workbench.
Target users: Independent developers, small teamsAI Product Manager.
Page style: Avoid the typical SaaS template feel, excessive blue-purple gradients, and excessive card clutter. The desired effect is a sophisticated, restrained, and clear information hierarchy, while also incorporating a futuristic and tool-like aesthetic.
Please complete the following:
- Design a complete homepage
- Includes product name, main title, subtitle, main CTA, and secondary CTA.
– Showcase 3 core capabilities:automaticBreak down tasks, execute continuously, and review and optimize.
– A product interface preview area is required, but it should not resemble a standard dashboard template.
– The first screen should have a clear visual memory point.
- Design style requirements
– Use non-template layouts to avoid centering and stacking all content.
– The font hierarchy should be clear, and the title should be impactful but not crude.
– Limit the color scheme to 3-5 primary colors.
Animation effects are acceptable, but they should serve to convey information, not just show off technical skills.
– The page needs to be adapted for both mobile and desktop devices.
- Code requirements
– Please output the complete, runnable code directly.
- Do not use placeholders, and do not omit any critical code.
– Don't just offer design suggestions; actually implement the page.
– If using components, please ensure that all components are fully written.
– If styling is required, please provide the complete CSS/Tailwind class.
- Acceptance Standards
– The page should not look like AI Default generated SaaS template
- Clear visual hierarchy, obvious CTA
– The screenshot must also be valid at 9:16 on mobile devices.
– All text must not overflow or overlap.
– The final result should resemble the homepage of a real product launch.
Please briefly describe your design direction first, and then provide a complete implementation.
The addition of a top navigation bar to Taste Skill makes it much more visually appealing; these days, which website doesn't have a navigation bar at the top?
The product preview on the right is no longer just an abstract graphic; users can understand the product's path through step-by-step text.
The mobile version is also more mature, with capabilities becoming independent information blocks, and the reading order is more natural.
- Codex test 2
Of course, existing projects can also be refactored using Taste Skill.
Prompt words:
Please use the redesign-existing-projects, minimalist-ui, high-end-visual-design, and full-output-enforcement tools in Taste Skill to help me redesign the homepage of an existing project.
Project location:
D:\360MoveData\Users\win\Desktop\公众号\wechat-topic-dashboard-ugly-homepage
background:
This is the official homepage of a "WeChat Official Account Topic Management Platform," whose product name is Content Desk. It targets content teams on platforms like WeChat Official Accounts, Xiaohongshu, Video Accounts, and Zhihu, helping them manage topic selection, assign responsible personnel, track progress, and view content. AI recommendand content presentation.
The current problem:
The current page has all the necessary functions and information, but its visual presentation is very template-like:
– The blue-purple-pink gradient is too heavy.
– Exaggerated headline
- Page excessively centered
- Card stacking is severe
– CTA repeat
– Product screenshots are decorated, unlike real products.
- Loose information hierarchy
– The reading path on mobile devices is very long
– Overall, it looks like a normal AI Generated SaaS landing page
Refactoring goals:
Without altering the product's theme and core information, refactor it into a more professional, restrained, and credible homepage for a content operations tool website. The final result should resemble the official website of a real SaaS product preparing for launch, not a template page.
Please complete the following:
- First screen reconstruction
– Keep product name Content Desk
– Maintain product positioning: A WeChat Official Account topic management platform for content teams.
– A clear main title, subtitle, main CTA, and secondary CTA are required.
– Avoid using exaggerated expressions like "efficiency increased by 300%".
– The first screen must display a credible product interface preview, not a plain decorative image.
– It should be visually memorable, but not flashy.
- Product Capabilities Demonstration
The following abilities need to be demonstrated:
– AI recommendTopic selection
– Multi-platform topic selection management
– Status and Responsible Person Tracking
- Deadlines and Priority Management
– Content Risk Warning
– Performance review
Do not use the following display methodSimpleStack up 6 large cards and reorganize the information hierarchy according to the content operation scenario.
- Workflow Demonstration
Demonstrating a content team's process from topic selection to post-mortem analysis:
– Collect hot topics
– Evaluate topic selection
– Assign writing
– Review and release
– Data Review
The workflow should correspond to the product interface, and should not be just a simple 1, 2, 3 step card.
- Page style requirements
– With a feel reminiscent of Notion / Linear / Lark Multi-Table / Modern B2B SaaS tools
– Restrained, refreshing, trustworthy
– Moderate information density, avoid excessive information.
– Avoid large areas of blue-purple gradient.
– Avoid stacking large, rounded cards.
– Avoid overly exaggerated shadows
– Avoid marketing jargon
– There should be a clear layout rhythm, white space, font hierarchy, and status colors.
Desktop-first, but mobile-first should also be a natural fit.
- Code requirements
– Directly modify existing files in the project
– Output a complete, runnable version
– Do not omit the code
– Do not use lorem ipsum
– Don't just offer design suggestions; actually implement the page.
- Ensure that text does not overflow or overlap on both desktop and mobile devices.
– It can be implemented using pure static HTML/CSS; no complex frameworks are needed.
- Acceptance Standards
– It shouldn't look like... AI Default generated SaaS template
– The product interface preview should be believable, clearly indicating that it is a "content selection management tool".
– CTA is clear but not noisy
– Capabilities and processes are not about stacking cards, but about organizing them around real-world content operation scenarios.
– Natural reading order on mobile devices
– The visual difference before and after reconstruction should be obvious.
– The final page is suitable as a practical case study for refactoring existing projects using Taste Skill.
First, briefly point out the main problems with the original page, then explain your refactoring strategy, and finally modify the project files and provide a complete implementation.
The original page's blue-purple-pink gradient and heavy shadows were too eye-catching, the first screen was overly centered, and the functions and processes were all stacked with cards on an average basis.
The product screenshots in the middle are also too decorative, and the data and interface structure inside look fake, more like a mockup placed to fill the first screen.
The problems are more pronounced on mobile devices: navigation, titles, buttons, screenshots, and function cards are piled up one after another, resulting in a long reading path and heavy visual noise.
The redesigned desktop interface looks like this:
The redesigned mobile app looks like this:
The redesigned page layout looks much better; the original page colors were almost blinding.
The left side of the desktop displays product positioning and core data, while the right side provides a reliable preview of a topic selection workbench. Users can easily understand that this is used to manage topic selection, status, and...AI Tools for recommendations, risks, and release performance.
The information order on mobile devices has changed to: brand navigation, product positioning, main title, CTA, and core data. Users no longer need to navigate through a bunch of transitions and marketing rhetoric, allowing them to understand what the product is more quickly.
AI AgentIt is becoming part of the development process.
The Stack Overflow 2025 Developer Survey shows that 84% of developers have used or plan to use it. AI Tools that 51% of professional developers use daily.
at the same time,AI The Code Tools market is projected to grow from $4.3 billion in 2023 to $12.6 billion in 2028.
butAI Being able to write code doesn't mean you can build a product. This is especially true for front-end development, where many aspects require skill. Agent The generated results are still in the Demo stage.
Taste Skill encapsulates the experience and aesthetic sense of front-end designers into skill rules, allowing... AI Agent It can generate interfaces that are closer to real product delivery standards.
Solved AI The most common pain points in front-end development include: page templates, overuse of card stacking and gradients, poor mobile adaptation, lack of credibility in product previews, chaotic back-end information hierarchy, and high cost of rebuilding existing projects.
letAI Product website homepage, SaaS landing page, backend management system, content operation workbench,Agent Taste Skill can be used to create product demos, customer project prototypes, and UI refactoring of existing projects.
For small teams without a complete design team, it can significantly reduce the cost from idea to MVP, and from demo to a demonstrable product.
The value of Taste Skill lies in transforming front-end aesthetics and product judgment into a reusable tool. AI productive forces.
Original link:It garnered over 40,000 stars on GitHub, making AI Generate tasteful front-end pages