Skip to content

ailwind 原生质感 + Stone 极简 + 虚线边框 #18

@bravf

Description

@bravf

请将页面设计为「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 用在:
    1. announce 顶部提示条
    2. dropzone 上传投放区
    3. 次级信息卡(如 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/次级卡片),深浅双主题统一,避免炫光和重渐变。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions