Skip to content

Commit f9ef972

Browse files
tpitretpitre
committed
feat: improve UI consistency and add MCP server messaging
- Update thinking message design to match rest of UI - Remove italics and bright yellow styling - Use consistent dark background and subtle colors - Update loading dots to use brand blue color - Widen interface layout from 800px to 900px for better content display - Add clear MCP server messaging throughout the interface - Updated headers and descriptions to clarify this is an MCP server - Emphasize specialized design systems knowledge base - Distinguish from generic AI assistants - Update meta tags and social sharing descriptions
1 parent 8bff5b8 commit f9ef972

File tree

2 files changed

+23
-20
lines changed

2 files changed

+23
-20
lines changed

‎ai-chat.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -259,8 +259,8 @@
259259
</head>
260260
<body>
261261
<div class="header">
262-
<h1>🤖 AI-Powered Design Systems Assistant</h1>
263-
<p>Ask me anything about design systems, and I'll search through your knowledge base to provide expert answers</p>
262+
<h1>🤖 Design Systems MCP Server</h1>
263+
<p>This is an MCP (Model Context Protocol) server with specialized design systems knowledge. Ask me anything about design systems, and I'll search through 109 curated resources to provide expert answers</p>
264264
</div>
265265

266266
<div class="chat-container">
@@ -290,7 +290,7 @@ <h3>💡 Try asking me about:</h3>
290290

291291
<div class="messages" id="messages">
292292
<div class="message system">
293-
🎯 Welcome! I'm your AI design systems assistant. I can search through your design systems knowledge base and provide expert answers.
293+
🎯 Welcome! This is an MCP (Model Context Protocol) server with specialized design systems knowledge. I can search through a curated knowledge base of 109 design systems resources to provide expert answers.
294294
<br><br>
295295
💡 Ask me anything about design systems, components, tokens, or best practices!
296296
</div>

‎src/index.ts‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -740,15 +740,15 @@ export default {
740740
<meta charset="UTF-8">
741741
<meta name="viewport" content="width=device-width, initial-scale=1.0">
742742
<title>Design Systems Assistant - AI-Powered Design Systems Knowledge</title>
743-
<meta name="description" content="AI-powered assistant that searches through design systems knowledge base to answer questions about components, tokens, patterns, and best practices.">
743+
<meta name="description" content="MCP (Model Context Protocol) server with specialized design systems knowledge. Search through 109 curated resources to get expert answers about components, tokens, patterns, and best practices.">
744744
745745
<!-- Favicon -->
746746
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 482'%3E%3Cstyle%3E.st1%7Bfill:%23333333%7D@media (prefers-color-scheme:dark)%7B.st1%7Bfill:%23ffffff%7D%7D%3C/style%3E%3Cpath class='st1' d='M439.7 462.3c-12 0-22.1 4.8-30.1 16.8l-32.7-192.9 2.6-1.4C422.9 351 490.5 392 549.4 392c42.9 0 71-17.4 71-46.9 0-30.1-39.5-44.9-102.3-66.3-59.6-21.4-133.2-54.3-133.2-140.8 0-77.7 71-138 170-138 54.9 0 81 15.4 99.7 15.4 10.8 0 18.1-3.4 25.4-12.8l21.4 170.7-2.6 1.4c-32.1-54.3-86.4-85.7-142.5-85.7-44.1 0-73.6 20.2-73.6 46.9 0 30.2 38.9 42.9 79.6 58.9 70.2 24.2 158 57.5 157.2 148.8 0 80.3-70.2 138.6-164 138.6C497.9 482.2 460.4 462.3 439.7 462.3z'/%3E%3Cpath class='st1' d='M831.5 2.5l126.3 236.7L830.4 477.9h124.2L1080 239.2 956.8 2.5H831.5z'/%3E%3Cpath class='st1' d='M125.4 2.5L0 241.2l123.2 236.7h125.2L122.2 241.2 249.6 2.5H125.4z'/%3E%3C/svg%3E">
747747
748748
<!-- Open Graph / Social Media Meta Tags -->
749749
<meta property="og:type" content="website">
750750
<meta property="og:title" content="Design Systems Assistant - AI-Powered Knowledge Base">
751-
<meta property="og:description" content="AI assistant that searches through 109 design systems resources to answer questions about components, tokens, patterns, and best practices.">
751+
<meta property="og:description" content="MCP server with specialized design systems knowledge. Search through 109 curated resources to get expert answers about components, tokens, patterns, and best practices.">
752752
<meta property="og:url" content="https://design-systems-mcp.southleft.com">
753753
<meta property="og:image" content="https://design-systems-mcp.southleft.com/og-image.png">
754754
<meta property="og:image:width" content="1200">
@@ -757,7 +757,7 @@ export default {
757757
<!-- Twitter Card -->
758758
<meta name="twitter:card" content="summary_large_image">
759759
<meta name="twitter:title" content="Design Systems Assistant">
760-
<meta name="twitter:description" content="AI-powered assistant for design systems knowledge">
760+
<meta name="twitter:description" content="MCP server with specialized design systems knowledge and curated resources">
761761
<meta name="twitter:image" content="https://design-systems-mcp.southleft.com/og-image.png">
762762
763763
<!-- Additional Meta -->
@@ -1134,11 +1134,11 @@ export default {
11341134
case 'thinking':
11351135
return {
11361136
...base,
1137-
background: '#2d1e00',
1138-
color: '#ffd43b',
1139-
border: '1px solid #fab005',
1140-
fontStyle: 'italic',
1141-
borderRadius: '8px',
1137+
background: '#25262b',
1138+
color: '#909296',
1139+
border: '1px solid #373a40',
1140+
fontStyle: 'normal',
1141+
borderRadius: '12px',
11421142
maxWidth: '85%',
11431143
marginLeft: '0',
11441144
marginRight: 'auto'
@@ -1165,18 +1165,18 @@ export default {
11651165
}
11661166
if (type === 'thinking') {
11671167
return (
1168-
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
1169-
<div style={{ display: 'flex', gap: '2px' }}>
1168+
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
1169+
<div style={{ display: 'flex', gap: '3px' }}>
11701170
<span style={{
1171-
width: '4px', height: '4px', background: '#ffd43b', borderRadius: '50%',
1171+
width: '6px', height: '6px', background: '#339af0', borderRadius: '50%',
11721172
animation: 'thinking 1.5s ease-in-out infinite'
11731173
}}></span>
11741174
<span style={{
1175-
width: '4px', height: '4px', background: '#ffd43b', borderRadius: '50%',
1175+
width: '6px', height: '6px', background: '#339af0', borderRadius: '50%',
11761176
animation: 'thinking 1.5s ease-in-out infinite 0.2s'
11771177
}}></span>
11781178
<span style={{
1179-
width: '4px', height: '4px', background: '#ffd43b', borderRadius: '50%',
1179+
width: '6px', height: '6px', background: '#339af0', borderRadius: '50%',
11801180
animation: 'thinking 1.5s ease-in-out infinite 0.4s'
11811181
}}></span>
11821182
</div>
@@ -1194,7 +1194,7 @@ export default {
11941194
11951195
return (
11961196
<div style={{
1197-
maxWidth: '800px',
1197+
maxWidth: '900px',
11981198
margin: '0 auto',
11991199
width: '100%',
12001200
padding: '0 24px'
@@ -1237,7 +1237,7 @@ export default {
12371237
Design Systems Assistant
12381238
</Title>
12391239
<Text size="sm" style={{ color: '#909296' }}>
1240-
Powered by AI • 109 design systems resources
1240+
MCP Server • 109 design systems resources • Specialized knowledge base
12411241
</Text>
12421242
</div>
12431243
<Badge variant="light" color="green" size="sm">
@@ -1288,7 +1288,7 @@ export default {
12881288
lineHeight: '1.5'
12891289
}}
12901290
>
1291-
Search through your design systems knowledge base to answer questions about components, tokens, patterns, and best practices.
1291+
This is an MCP (Model Context Protocol) server with specialized design systems knowledge. Unlike generic AI assistants, I search through a curated knowledge base of 109 design systems resources to provide expert answers about components, tokens, patterns, and best practices.
12921292
</Text>
12931293
</div>
12941294
@@ -1461,7 +1461,7 @@ export default {
14611461
background: '#1a1b1e'
14621462
}}>
14631463
<div style={{
1464-
maxWidth: '800px',
1464+
maxWidth: '900px',
14651465
margin: '0 auto',
14661466
position: 'relative'
14671467
}}>
@@ -1558,6 +1558,9 @@ export default {
15581558
textAlign: 'center',
15591559
marginTop: 'auto'
15601560
}}>
1561+
<Text size="sm" style={{ color: '#6c6f75', fontSize: '13px', marginBottom: '8px' }}>
1562+
🤖 MCP Server for Design Systems • Powered by curated knowledge base
1563+
</Text>
15611564
<Text size="sm" style={{ color: '#6c6f75', fontSize: '13px' }}>
15621565
Made with ❤️ by{' '}
15631566
<a

0 commit comments

Comments
 (0)