mobile-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

This skill guides the creation of distinctive, production-grade mobile interfaces using Flutter that avoid generic "standard widget" aesthetics. Implement real working code with exceptional attention to aesthetic details, animations, and creative choices.

The user provides mobile requirements: a screen, app flow, custom widget, or interface to build. They may include context about the purpose, audience, or technical constraints.

本技能指导开发者使用Flutter创建独具特色、达到生产级标准的移动界面，摒弃千篇一律的「标准Widget」视觉风格。实现可直接运行的代码，同时格外注重美学细节、动效设计与创意选择。

用户需提供移动开发需求：如要构建的页面、应用流程、自定义Widget或界面。他们可能会附上关于应用用途、目标受众或技术限制的相关背景信息。

Design Thinking

设计思路

Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this app solve? Who is holding the device?
Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, neumorphic, glassmorphic, industrial/utilitarian, etc. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (Flutter performance, platform specificities for iOS/Android, accessibility).
Differentiation: What makes this interaction UNFORGETTABLE? What's the one gesture or transition someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Avoid the "default Material Design" look unless explicitly requested.

Then implement working Flutter code (Dart) that is:

Production-grade: Proper state management structure (even if simple), error handling, and responsiveness.
Visually striking: Custom painters, shaders, and non-standard layouts.
Cohesive: Consistent design language across all widgets.
Meticulously refined: Exact padding, typography, and timing.

编码前，先理解项目背景并确定一个明确的大胆美学方向：

用途：这款应用解决什么问题？目标用户是谁？
风格基调：选择一种极致风格：极简主义、极繁主义、复古未来风、有机自然风、奢华精致风、趣味玩具风、杂志排版风、拟物化、玻璃拟态、工业实用风等。可参考这些风格，但需设计出契合选定美学方向的专属方案。
限制条件：技术要求（Flutter性能、iOS/Android平台特性、无障碍适配）。
差异化亮点：什么能让交互体验令人难忘？哪一个手势或转场效果会让用户印象深刻？

关键要求：选定清晰的设计方向并精准落地。除非用户明确要求，否则避免采用「默认Material Design」风格。

随后实现可运行的Flutter（Dart）代码，需满足：

生产级标准：具备合理的状态管理结构（即使是简单结构）、错误处理机制与响应式设计。
视觉冲击力：运用自定义绘制（CustomPainter）、着色器（shader）与非标准布局。
风格统一：所有Widget遵循一致的设计语言。
细节打磨：精确设置内边距、排版与动效时长。

Mobile Aesthetics Guidelines

移动界面美学指南

Focus on:

Typography: Go beyond the default
```
Roboto
```
or
```
SF Pro
```
. Use
```
google_fonts
```
to introduce character. Pair distinctive display fonts with readable body text. Use varied weights and heights (
```
height
```
property in
```
TextStyle
```
) to create rhythm.
Color & Theme: Commit to a cohesive
```
ThemeData
```
. Use
```
ColorScheme
```
semantics but push the boundaries. don't just use primary/secondary; use custom extensions if needed. Dominant colors with sharp accents outperform timid, safe palettes.
Motion & Interaction: Flutter excels here. Use
```
AnimationController
```
for choreographed sequences. Implement
```
Hero
```
transitions for continuity. Use
```
AnimatedBuilder
```
for complex effects. Focus on the "feel" of touch—custom splashes, scale effects on press, and physics-based scrolling. One well-orchestrated screen transition creates more delight than scattered generic fades.
Spatial Composition: Break the standard
```
Column
```
/
```
Row
```
grid. Use
```
Stack
```
and
```
Positioned
```
for layering. Use
```
Transform
```
for depth. distinct use of white space (or lack thereof).
Backgrounds & Visual Details: Avoid flat solid backgrounds. Use
```
CustomPainter
```
for generative backgrounds,
```
ShaderMask
```
for gradients on text/icons,
```
BackdropFilter
```
for blur/glass effects, and noise textures. Add depth with careful shadows (
```
BoxShadow
```
) and layers.

NEVER use generic AI-generated aesthetics like standard unstyled implementations, cliched blue/purple gradients, or "default Flutter counter app" vibes.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics.

IMPORTANT: Match implementation complexity to the aesthetic vision.

Maximalist: Heavy use of
```
CustomPainter
```
,
```
ShaderMask
```
, explicit animations, and layered
```
Stack
```
layouts.
Minimalist: rigorous attention to
```
Padding
```
,
```
Align
```
, typography, and subtle implicit animations (
```
AnimatedContainer
```
,
```
AnimatedOpacity
```
).

Remember: Claude is capable of extraordinary creative work in Flutter. Don't hold back—show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

重点关注以下方面：

排版：跳出默认的
```
Roboto
```
或
```
SF Pro
```
字体。使用
```
google_fonts
```
引入富有特色的字体。将醒目的标题字体与易读的正文字体搭配使用。通过调整字重与行高（
```
TextStyle
```
中的
```
height
```
属性）营造视觉节奏。
色彩与主题：打造连贯统一的
```
ThemeData
```
。运用
```
ColorScheme
```
语义但突破常规限制。不要仅依赖主色/次要色；必要时使用自定义扩展。鲜明主色搭配亮眼强调色，效果远胜于保守平淡的配色方案。
动效与交互：Flutter在此方面优势显著。使用
```
AnimationController
```
编排连贯的动效序列。实现
```
Hero
```
转场以保证体验连续性。运用
```
AnimatedBuilder
```
实现复杂效果。注重触摸反馈体验——自定义水波纹效果、按压缩放效果与物理滚动。一个精心编排的页面转场所带来的愉悦感，远胜于零散的通用淡入淡出效果。
空间布局：打破标准的
```
Column
```
/
```
Row
```
网格布局。使用
```
Stack
```
与
```
Positioned
```
实现分层效果。运用
```
Transform
```
营造深度感。灵活运用留白（或刻意减少留白）。
背景与视觉细节：避免使用单调的纯色背景。使用
```
CustomPainter
```
生成程序化背景，
```
ShaderMask
```
为文字/图标添加渐变效果，
```
BackdropFilter
```
实现模糊/玻璃拟态效果，以及添加噪点纹理。通过精心设置阴影（
```
BoxShadow
```
）与分层来营造深度感。

绝对不要使用通用AI生成的视觉风格，比如未加样式的标准实现、老套的蓝紫渐变，或是「默认Flutter计数器应用」的既视感。

创造性地解读需求，做出符合项目背景的独特设计选择。每个设计都应独一无二，在明暗主题、字体选择与美学风格上有所差异。

重要提示：根据美学定位匹配实现复杂度。

极繁风格：大量运用
```
CustomPainter
```
、
```
ShaderMask
```
、显式动画与分层
```
Stack
```
布局。
极简风格：严格把控内边距（
```
Padding
```
）、对齐（
```
Align
```
）、排版与微妙的隐式动画（
```
AnimatedContainer
```
、
```
AnimatedOpacity
```
）。

请记住：Claude能够在Flutter开发中完成极具创意的工作。大胆尝试——展示跳出常规框架、专注打造独特视觉风格所能实现的精彩成果。