Skip to content

Simplify studio homepage to professional development tool aesthetic - #68

Merged
huangyiirene merged 4 commits into
mainfrom
copilot/simplify-studio-homepage
Jan 15, 2026
Merged

Simplify studio homepage to professional development tool aesthetic#68
huangyiirene merged 4 commits into
mainfrom
copilot/simplify-studio-homepage

Conversation

CopilotAI commented Jan 15, 2026

Copy link
Copy Markdown
Contributor

The homepage had a marketing-focused design (hero section, decorative animations, excessive whitespace) unsuitable for a professional development tool.

Changes

Header

  • Reduced height: 64px → 56px
  • Simplified buttons: removed shadows, reduced padding, changed "New Design" → "New"
  • Removed decorative elements (blur, heavy borders)

Hero Section Removed

  • Large headline "Build Stunning Interfaces, Purely from JSON"
  • Marketing copy and product description
  • Decorative blur animations, pulsing badges, transform effects
  • Padding reduced: py-16py-6

Category Navigation

  • Changed from pill-style buttons to tab navigation with bottom border (VS Code-style)
  • Shows counts inline: "Layouts (3)"
  • Active state indicated by border-bottom instead of background fill

Template Grid

  • Increased density: 3 → 4 columns on xl screens
  • Simplified cards: removed decorative mock windows, animations, overlays
  • Card height: fixed 288px → dynamic with aspect-video
  • Clean hover: border color change only

Routing Fix

  • Template navigation corrected: /${key}/studio/${key}

Code Impact

apps/playground/src/pages/Home.tsx: +77 / -108 lines

Before / After

Before - Marketing Landing Page:
before

After - Professional Tool Interface:
after

Category View (Data Display):
category

The new design aligns with professional development tools (VS Code, Figma, CodeSandbox) - information-dense, minimal decoration, functional hierarchy.

Original prompt

简化studio首页,你必须像一个专业的开发工具


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@vercel

vercelBot commented Jan 15, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentReviewUpdated (UTC)
objectui-playgroundReadyReadyPreview, CommentJan 15, 2026 4:13am

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
CopilotAI changed the title [WIP] Simplify studio homepage for better user experienceSimplify studio homepage to professional development tool aestheticJan 15, 2026
CopilotAI requested a review from hotlongJanuary 15, 2026 03:28
@hotlong
hotlong requested review from Copilot and removed request for hotlongJanuary 15, 2026 03:59

CopilotAI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR transforms the Object UI Studio homepage from a marketing-focused landing page to a professional development tool interface, aligning it with industry-standard IDEs like VS Code and Figma.

Changes:

  • Simplified header styling with reduced height (64px → 56px) and minimalist button design
  • Removed hero section including marketing copy, decorative animations, and excessive whitespace
  • Replaced pill-style category buttons with tab-based navigation featuring VS Code-style bottom borders
  • Increased template grid density (3 → 4 columns) with cleaner, more compact card designs
Comments suppressed due to low confidence (1)

apps/playground/src/pages/Home.tsx:38

  • The header button label was shortened from "New Design" to just "New", which may be too terse and could confuse users about what type of new item will be created. In a professional tool, clarity is important. Consider keeping "New Design" or using an alternative like "New Project" to maintain clarity.
 New

Comment threadapps/playground/src/pages/Home.tsx Outdated
Comment threadapps/playground/src/pages/Home.tsx Outdated
huangyiireneand others added 2 commits January 15, 2026 12:12
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@github-actions

Copy link
Copy Markdown
Contributor

✅ All checks passed!

  • ✅ Type check passed
  • ✅ Tests passed
  • ✅ Lint check completed

2 similar comments
@github-actions

Copy link
Copy Markdown
Contributor

✅ All checks passed!

  • ✅ Type check passed
  • ✅ Tests passed
  • ✅ Lint check completed

@github-actions

Copy link
Copy Markdown
Contributor

✅ All checks passed!

  • ✅ Type check passed
  • ✅ Tests passed
  • ✅ Lint check completed

@huangyiirene
huangyiirene marked this pull request as ready for review January 15, 2026 04:24
@huangyiirene
huangyiirene merged commit dba6eab into mainJan 15, 2026
11 checks passed
CopilotAI added a commit that referenced this pull request Feb 16, 2026
- Export TimelineConfig and TimelineConfigSchema from @object-ui/types (#64)
- Export NavigationConfig and NavigationConfigSchema from @object-ui/types
- Update ObjectTimeline to use spec-compliant startDateField with backward compat (#72)
- Add endDateField, groupByField, colorField, scale to ObjectTimeline
- Add navigation support to ObjectGallery via useNavigationOverlay (#66)
- Implement navigation.view property in useNavigationOverlay hook (#68)
- Implement emptyState spec property in ListView (#71)
- Add emptyState to ListViewSchema type
- Add tests for all new functionality
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@huangyiirene@hotlong