Web Design Guidelines

What it does

This skill provides ByteDance's internal web design guidelines to AI agents, enabling them to generate code that adheres to specific brand standards and visual consistency rules. It acts as a reference library for styling, layout, and component usage within the Deer-Flow ecosystem.

When to use it

• Building new interfaces that must strictly follow ByteDance's corporate design system.
• Refactoring existing components to ensure visual alignment with current brand guidelines.
• Generating documentation or code snippets that explain specific design decisions made by the team.
• Validating whether a generated UI component matches established style patterns.

Key capabilities

• Access to official ByteDance web design standards and best practices.
• Guidance on consistent visual identity implementation across frontend projects.
• Support for generating compliant HTML, CSS, or framework-specific code based on these rules.

Example prompts

• "Generate a responsive navigation bar using the ByteDance web design guidelines."
• "Explain how to implement the official card component style defined in the Deer-Flow design system."
• "Review this layout and suggest changes to align it with ByteDance's color and typography standards."

Tips & gotchas

• This skill is specific to ByteDance's internal ecosystem; do not expect it to cover general web design principles or other companies' guidelines.
• Ensure your AI agent has access to the necessary frontend frameworks (like React or Vue) to effectively apply these design rules in code generation.