-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Description
请将页面设计为「Tailwind 原生工具风(Stone 系)+ 中等虚线密度」:
【风格目标】
- 整体气质:克制、实用、工程化、低装饰
- 视觉关键词:stone/slate、native-tailwind feel、utility-first、clean
- 避免:霓虹、重渐变、玻璃拟态、强动画、大面积发光
【配色与主题】 - 支持深浅双主题(用户选择优先,其次跟随系统)
- 浅色基调:bg-stone-50 / stone-100 附近
- 深色基调:stone-900 / stone-800 附近
- 文本对比清晰,次级文案用 muted stone/slate
【边框与圆角(核心约束)】 - 统一圆角:rounded-sm(小圆角)
- 主结构(hero、panel、按钮、输入、状态条)优先实线 border
- dashed 采用“中等密度”策略:仅用于强调模块,不全局铺开
- 推荐 dashed 用在:
- announce 顶部提示条
- dropzone 上传投放区
- 次级信息卡(如 hero-stat / control / list item)
- 不推荐 dashed 用在:页面最外层容器、所有按钮、所有输入(避免视觉噪音)
【排版与组件】 - 标题不过度营销化,信息层级清晰
- 间距节奏:8 / 10 / 12 / 16
- 可适当使用 font-mono 点缀(如 announce、状态信息、技术标签)
- 链接样式朴素(可下划线),按钮简洁直接
【交互】 - hover/focus 仅轻微变化(边框/背景微调)
- focus ring 清晰但克制
- 动画短且少,不做花哨转场
【一致性检查(必须)】
请逐块检查并统一同一语言: - announce
- hero
- panel
- dropzone
- controls
- status
- list items
- buttons / inputs
确保不会出现“某些模块还是旧风格(重渐变、过度圆角、强发光)”。
【输出】 - 直接给可运行代码
- 同时说明:哪些区域用了 dashed,哪些保持实线,以及为什么这样分配
一句话速记版:
做成 Tailwind 原生 stone 工具风:rounded-sm、主结构实线、dashed 只做中等强调(announce/dropzone/次级卡片),深浅双主题统一,避免炫光和重渐变。
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels