精选 · 开放 · 免费
Madebyon
一家专注于通过大胆设计和技术创新塑造数字体验未来的高端数字机构。
AgencyCleanBold TypographyPremiumDesign Tools
01
设计气质 DNA
数字机构创意工作室创新现代高端
一家专注于数字体验的高端建筑事务所，兼具技术精准度与创意魄力。
02
色彩
#DCFF4FAccent
#FAF9F4Ink
#000000BG
#151515BG soft
#888888Muted
rgba(250,249,244,0.12)Line
采用高对比极简主义，以单一鲜亮的强调色用于行动召唤，构建大胆、聚焦的视觉层次。
03
字体
geometric-sans
- display
56px · 400 - h2
40px · 400 - body
16px · 400 - caption
12px · 400
所有主要文本使用几何无衬线字体，保持整洁现代的审美。 · 标题保持大而粗体，字间距紧密以增强视觉冲击力。 · 限制字重变化，主要依赖400字重以呈现一致、精致的观感。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
以8px为基础单位，保持一致的节奏，并配合大量留白营造宽敞、高级的空间感。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 24px
pill · 999px
极简边框，仅通过细微的透明度变化或极细分割线进行区域划分。
0px 4px 14px rgba(0, 0, 0, 0.12) · 0px 24px 60px rgba(0, 0, 0, 0.35) · 0px 32px 68px rgba(0, 0, 0, 0.3)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
左对齐的英雄文本区域，下方衔接全宽视觉元素，过渡至基于网格的项目展示。
07
动效与交互
220msmicro
400mssmall
900msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing
页面元素采用平滑的淡入和变换动画。 · 实验性区域采用动态视频背景并搭配微妙的粒子效果。 · 交互元素通过悬停过渡提供增强的反馈。
通过颜色变化、透明度调整或轻微变换提供微妙的视觉反馈。 · 提供即时的视觉响应和平滑的过渡状态。
08
组件
- button 高对比的药丸形按钮，采用鲜亮的强调色（黄色）配黑色文字，或使用白色文字的描边药丸按钮。
- card 内容卡片，具有充裕的内边距、微妙的背景区分和平滑的悬停过渡效果。
- chip 用于导航或标签的极简芯片组件，常带有边框或微妙的背景。
- input 简洁、极简的输入框，带有细微边框和清晰的聚焦状态。
- hero 全宽、沉浸式的英雄区域，采用大号排版和动态视觉背景（视频/图片）。
09
文案语气与禁用清单
- 语气 自信、富有远见、专业，并具有前瞻性视角。
- 标题风格 采用大而具有冲击力的排版，进行大胆、宣言式的陈述。
- 按钮文案 直接且以行动为导向，使用高对比度按钮驱动用户参与。
- 避免使用装饰性或衬线字体——截图显示全文采用简洁的几何无衬线字体。
- 避免使用多种强调色——截图显示仅有一种主导强调色（黄绿色）。
- 避免用不必要的元素使界面显得杂乱——截图显示充足的留白和极简的UI。
- 避免使用小而拥挤的排版——截图显示大而易读的文本及充裕的间距。
- 避免使用僵硬、方正的布局——截图显示流畅、有机的元素及圆角。
- 避免依赖粗重的边框进行分隔——截图显示使用细微的间距和背景差异进行区分。
- 避免: 技术术语
- 避免: 过于随意的语言
- 避免: 不确定或犹豫的措辞
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Madebyon的高端数字机构网站，采用深色、高对比度美学，搭配几何无衬线字体。主色为黑色（#000000）和米白色（#FAF9F4），并以鲜亮的黄绿色（#DCFF4F）作为行动召唤元素的强调色。设计强调大胆、大号的排版（紧密字间距）、充足的留白以及沉浸式视觉内容（包括动态视频背景）。核心原则包括极简主义、自信与技术创新。需严格避免：使用装饰性字体、多种强调色、杂乱布局、小号文本、僵硬方正布局以及粗重边框。该网站将自身定位为通过雄心勃勃、高影响力的协作来塑造数字体验的未来。
en · zh-CN · zh-TW · ja · ko