27 lines
1.8 KiB
Markdown
27 lines
1.8 KiB
Markdown
---
|
|
name: Classic Text-Based UI Design
|
|
description: Use this skill to ensure all UI designs follow a raw, text-based, table-free, CSS-free nostalgic 90s aesthetic.
|
|
---
|
|
# Classic Text-Based UI Design Skill
|
|
|
|
When asked to design or update UIs under this style, you **MUST** strictly adhere to the following rules to maintain a nostalgic, purely text-based aesthetic:
|
|
|
|
## Core Rules
|
|
1. **No CSS or Styling:** Absolutely no `<style>` tags, inline `style="..."` attributes (except maybe `display:inline` for form elements), or external stylesheets. Do not use Flexbox, CSS Grid, or margins/padding.
|
|
2. **No Layout Tables:** Do not use `<table>`, `<tr>`, `<td>` for laying out pages, structure, or positioning items. Tables should only be used if explicitly requested for tabular data, but even then, basic text lists are preferred.
|
|
3. **No Centering or Alignment:** Do not use `<center>` tags, `align="..."` attributes, or `<div align="center">`. The entirety of the text should remain left-aligned naturally within the browser window.
|
|
4. **Pure Structural Flow:** Rely strictly on basic structural blocks:
|
|
- Paragraphs (`<p>`)
|
|
- Line Breaks (`<br>`)
|
|
- Horizontal Rules (`<hr size="1">`) for dividers
|
|
- Headers (`<h1>`, `<h2>`, etc.) for sections
|
|
5. **Formatting:**
|
|
- Bold: `<b>`
|
|
- Italic: `<i>`
|
|
- Underline: `<u>`
|
|
- Basic Colors: `<font color="red">`, `<font color="#000000">`
|
|
6. **Form Elements:** Keep `<form>`, `<input>`, `<select>`, and `<button>` elements unstyled. Use `<input type="submit">` instead of fancy buttons. Give inputs a basic `size="..."` if necessary for width.
|
|
7. **Body:** A common body tag to use is `<body bgcolor="#FFFFFF" text="#000000" link="#0000EE" vlink="#551A8B" alink="#FF0000">`. Do not include a background or surface color.
|
|
|
|
By following these constraints, you will achieve the strict, highly generic, early web (1995-1998) look.
|