TEXT로 UX 만들기(마크다운)

안녕하세요 여러분, IDEA나 사이드 프로젝트를 발표하고 싶습니다. ;) 한동안 가지고 놀고 있습니다.

나는 누구인가

저는 UX 담당자가 아닌 코더/프로그래머이지만 매우 자주 일부 UX 화면을 만들어야 합니다. 또한 많은 분들이 Figma 등과 같은 도구에서 UX 화면을 매우 빠르게 만들고 있다는 것을 알고 있지만 와이어프레임을 만들고 모든 것을 정렬하여 공유하기 위해 내보내는 등의 작업에는 여전히 시간이 걸립니다.

나는 Markdown의 열렬한 팬이므로 Markdown을 사용하여 목업을 만들 수 있다고 생각했습니다. 아니면 와이어프레임?
그래서 마지막에 "you text"라는 철자가 붙은 utext라는 것을 만들어서 문자를 보내고 UX를 얻습니다.

POC

현재 문법 및 언어와 파서는 코드의 파서/번역기로 https://pegjs.org/을 사용하여 생성된 POC만 있습니다.

프로젝트를 가지고 놀 수 있습니다. 여기를 참조하십시오https://utext.github.io/.

"?"를 클릭하면 몇 가지 예를 볼 수 있습니다.
그러나 예를 들어 로그인 양식을 표시하려는 경우 표시하기 위해 다음과 같이 표시됩니다.

===Login===
username : ___
password: *___
===

이것을 생성하는



예를 들어 버튼을 사용자 지정하려는 경우

===Login===
username : ___
password: *___
===[login][dont login]===

당신에게 이것을 줄 것입니다 :



아이디어는 그것이 무엇을 어떻게 보여야 하는지 시각적으로 설명하고 와이어프레임을 가지고 있다는 것입니다. 한 단계 더 나아가 HTML 코드로 내보낼 수 있고 다른 UI로 어떻게 보이는지 보고 싶다면 테마를 변경할 수도 있습니다.



지원되는 모든 요소는 기본적으로 HTML + 일부 부트스트랩 요소의 모든 것입니다. ? 의 도움말에서 확인할 수 있습니다. 웹사이트에서.

카드 예제는 다음과 같습니다.

---Bootstrap Cards works too---
I am the content [random btn]

you can otuput a table too : 

|header1|header2|
|col1   |col2   |
|col1|col2|
---
*Note should start and end with at least 3 dashes*

다음을 생성합니다.



모든 피드백을 환영합니다 :) 그냥 재미로 만들었습니다 :) 그리고 이것이 여러분에게 어떻게 보이는지 듣고 싶습니다 :) 의견이 있으십니까?

예, 이미지나 제목 등과 같은 대부분의 마크다운 항목은 작동합니다. 가서 가지고 놀아보세요 :) 버그가 예상됩니다! :)

추신 일반 JavaScript(서버 측 없음)이므로 github 계정의 gist에만 저장하거나 gist를 로드하거나 복사하여 붙여넣을 수 있습니다 :)