Japanese Webdesign

What it does

This skill enables AI agents to generate responsive Japanese website designs, adhering to specific cultural principles and design patterns prevalent in the Japanese market. It focuses on building trust through information transparency ("Anshin") and maximizing information density (“Ichimoku Ryouzen”), catering to user expectations shaped by platforms like Rakuten Ichiba and Yahoo Japan Shopping where comprehensive upfront details are valued. The skill provides HTML/CSS component examples and cultural context for creating designs optimized for the Japanese web landscape, particularly considering high mobile traffic and preferences for credit-card-only checkouts.

When to use it

• Designing an e-commerce website targeting the Japanese market.
• Creating landing pages intended for Japanese users.
• Developing a user interface that prioritizes trust and transparency in communication with Japanese customers.
• When needing component examples (product cards, banners, footers) tailored to Japanese design aesthetics.

Key capabilities

• Generates responsive website designs optimized for desktop and mobile viewing.
• Incorporates "Anshin" principles: providing all information upfront to build trust.
• Employs “Ichimoku Ryouzen” – maximizing information density on each page.
• Provides HTML/CSS component examples (product cards, banners, tables, footers, mobile navigation).
• Offers insights into Japanese cultural factors influencing web design preferences.

Example prompts

• "Generate a product card for a skincare item following Japanese web design principles."
• "Create a footer section for an e-commerce site targeting the Japanese market, emphasizing trust and information transparency."
• "Show me examples of mobile navigation patterns commonly used in Japanese websites."

Tips & gotchas

• The skill prioritizes displaying all relevant information upfront. Avoid progressive disclosure or "Learn More" buttons, as this can be perceived negatively by Japanese users.
• Be prepared for designs that may appear “cluttered” compared to Western aesthetics; this is intentional and reflects user expectations.
• Refer to the provided reference files (component-patterns.md and cultural-context.md) for detailed guidance on design patterns and cultural considerations.